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Foreword 


Ray and Vladimir have been THE BEST thing to happen to Magento ever since X.Commerce. 


Ok, that may be a slight exaggeration..., but it remains true that besides the software itself, 
Magento has always thrived on the dedication and enthusiasm of its large community. Ray 
and Vladimir are prime examples of the literally hundreds of developers, merchants, project 
managers, extension providers, event organizers, and platform evangelists that contribute 
every day to help community members make the most of their Magento shop. 


I met Ray and Vladimir in the early days of Magento and got to know them as two highly 
engaged Magento fanatics. They built shops, extended the functionality, and pushed Magento 
to its limits. Failed and succeeded more often than anyone can count. More importantly, they 
were always generous enough to share their learning with the community through blog posts, 
webinars, events, and as Magento Doctors! 


After a not-to-be-specified number of days, the announcement—we finally have Magento 2! If 
there are two people in our community capable of taking a deep dive into this new amazing 
platform and giving us practical recipes, it will be Ray and Vladimir. 


| look forward to seeing what we can make happen in this new chapter for Magento. A lot of 
things will change and this book will help you get started with over 50 recipes. 


One thing, however, will never change: don't touch the core... 


Guido Jansen 
Magento Community Manager 
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The writing of this book was a big thing for me. | spent every free minute 
with passion in writing this. | had many doubts to overcome this big 
challenge as a dyslexic person. But | never thought that writing this would 
give me lots of self-esteem, peace, and joy. This would not have happened 
without the loving support and patience of my wife, Mette, and daughter, 
Belize. Joining forces with my co-writer, Vladimir, was a lot of fun. Sharing 
thoughts and insights about our Magento passion was great. 


Last but not least, | would like to thank all the people who made writing 
this possible. 
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Preface 


Magento is one of the most successful open source e-commerce platforms out there today. 
It is powerful enough to build small or enterprise businesses. 


The first stable version of Magento was released in 2008. Since the beginning, lots of 
merchants have chosen Magento to be their platform with great success. 


The current global ecosystem of Magento includes 240+ merchants, 300+ partners, and 
4500+ certified developers, and this number is growing on a daily basis. 


Over the last few years, e-commerce has changed a lot, so Magento announced a new 
platform that will support this. This new era of commerce is called Magento 2. 


Magento 2 offers enhanced performance and scalability. The new platform is built from 
scratch to enable lots of new features. It supports both B2C and B2B businesses, and will 
serve the best omnichannel shopping experiences to their shoppers. 


This book will provide you with the necessary insights to get a better understanding on what is 
needed to build such a powerful commerce platform. 


The book is divided into several recipes, which show you which steps to take to complete a 
specific action. In each recipe, we have a section that explains how everything works. 


It will cover installing a Magento 2 website, configuring your categories and products, 
performance tuning, creating a theme, developing a module, and much more. 


At the end of this book, you will gain the knowledge to start building a success website. 


What this book covers 


Chapter 1, Installing Magento 2 on Apache and NGINX, is a totally different ballgame 
compared to Magento 1. Where Magento 1 could be installed through FTP or SSH, 
Magento 2 is installable only via the command-line interface for an experienced webmaster. 
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Chapter 2, Magento 2 System Tools, explains how to install Magento 2 via the command 
shell. Magento released a new powerful tool to manage and install sample data, reindex 
your database, back up your site, or flush your caches, which are just a few of the options. 


Chapter 3, Enabling Performance in Magento 2, explains how to configure different types of 
caching options. In Magento 2, the Full Page Cache (FPC) can be handled by Varnish to give 
your store a performance boost. There are also external services that you can use as a cache. 


Chapter 4, Creating Catalogs and Categories, shows you one of the major elements of a 
Magento store before creating products. Creating the correct product type including attributes 
is an important step in setting up a Magento store. 


Chapter 5, Managing Your Store, covers setting up the correct tax rules, configuring an 
inventory, and creating customer groups. 


Chapter 6, Creating a Magento 2 Theme, discusses the Magento 2 blank theme and how to 
use the fallback to create seasonal variations. It also explains how the new theme is set up 
and where files are stored. 


Chapter 7, Creating Magento 2 Extensions - the Basics, contains the basic functions required 
to use extensions in a Magento 2 installation. It contains a brief introduction to new methods 
introduced in the Magento 2 framework and examples on how to create basic functions. 


Chapter 8, Creating Magento 2 Extensions - Advanced, explains how to use advanced 
features in extensions for Magento 2. It also includes how to add unit/functional tests 
as this is a new requirement for extensions listed on the new Magento Connect. 


What you need for this book 


The following setup is recommended for maximum enjoyment: 


» Magento 2 source code 

>»  Avirtual Linux server (Ubuntu 15.10 or higher; DigitalOcean) 
>» Hypernode (https: //hypernode.com/) 

>»  CloudFlare (https: //www.cloudflare.com/) 

>» IDE (PhpStorm, NetBeans, and Sublime) 

>» AGit account 


Who this book is for 


This book is intended primarily for intermediate to professional merchants, webmasters, 
DevOps, solution integrators, and PHP developers who are interested in Magento 2. 
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It will cover the basic and advanced features of Magento 2 DevOps, performance, theming, 
development, and system configuration. 


In this book, you will find several headings that appear frequently (Getting ready, How to do it, 
How it works, There's more, and See also). 


To give clear instructions on how to complete a recipe, we use these sections as follows: 


Getting ready 


This section tells you what to expect in the recipe, and describes how to set up any software or 
any preliminary settings required for the recipe. 


How to do it... 


This section contains the steps required to follow the recipe. 


This section usually consists of a detailed explanation of what happened in the previous section. 


This section consists of additional information about the recipe in order to make the reader 
more knowledgeable about the recipe. 


See also 


This section provides helpful links to other useful information for the recipe. 


In this book, you will find a number of text styles that distinguish between different kinds of 
information. Here are some examples of these styles and an explanation of their meaning. 


Code words in text, database table names, folder names, filenames, file extensions, 
pathnames, dummy URLs, user input, and Twitter handles are shown as follows: 
"Go to your favorite browser and search using your yourdomain.com." 
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A block of code is set as follows: 


/usr/local/bin/php -£f install.php -- \ 
--license_agreement_accepted "yes" \ 
--locale "en_US" \ 

--timezone "America/Los Angeles" \ 
--default_currency "USD" \ 

--db host "mysql.example.com" \ 


When we wish to draw your attention to a particular part of a code block, the relevant lines or 
items are set in bold: 


docker run --rm --name magento2 -it -p 80:80 --link mysql:mysql -e 
MYSQL _USER=root -e MYSQL PASSWORD=admin -e PUBLIC _HOST=yourdomain.com 


raybogman/mage2cookbook-docker $* 


Any command-line input or output is written as follows: 


service apache2 status 


netstat -anp | grep apache2 


New terms and important words are shown in bold. Words that you see on the screen, for 
example, in menus or dialog boxes, appear in the text like this: "Check on the second like for 
the Server API; this should be FPM/ FastCGI." 


[ GS Warnings or important notes appear in a box like this. | 


[ Q Tips and tricks appear like this. | 
Reader feedback 


Feedback from our readers is always welcome. Let us know what you think about this book— 
what you liked or disliked. Reader feedback is important for us as it helps us develop titles 
that you will really get the most out of. 


To send us general feedback, simply e-mail feedback@packtpub.com, and mention the 
book's title in the subject of your message. 


If there is a topic that you have expertise in and you are interested in either writing or 
contributing to a book, see our author guide at www. packtpub.com/authors. 
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Customer support 


Now that you are the proud owner of a Packt book, we have a number of things to help you to 
get the most from your purchase. 


Downloading the example code 


You can download the example code files for this book from your account at http: //www. 
packtpub.com. If you purchased this book elsewhere, you can visit http: //www.packtpub. 
com/support and register to have the files e-mailed directly to you. 





You can download the code files by following these steps: 


1. Login or register to our website using your e-mail address and password. 
Hover the mouse pointer on the SUPPORT tab at the top. 

Click on Code Downloads & Errata. 

Enter the name of the book in the Search box. 

Select the book for which you're looking to download the code files. 


Choose from the drop-down menu where you purchased this book from. 


NOR wh 


Click on Code Download. 


Once the file is downloaded, please make sure that you unzip or extract the folder using the 
latest version of: 

>» WinRAR / 7-Zip for Windows 

> Zipeg / iZip / UnRarX for Mac 

>»  7-Zip / PeaZip for Linux 


Downloading the color images of this book 


We also provide you with a PDF file that has color images of the screenshots/diagrams used 
in this book. The color images will help you better understand the changes in the output. You 
can download this file from https: //www. packtpub.com/sites/default/files/ 
downloads/Magento2Cookbook_ColorImages. pdf. 
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Although we have taken every care to ensure the accuracy of our content, mistakes do happen. 
If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be 
grateful if you could report this to us. By doing so, you can save other readers from frustration 
and help us improve subsequent versions of this book. If you find any errata, please report 
them by visiting http: //www.packtpub.com/submit-errata, selecting your book, 
clicking on the Errata Submission Form link, and entering the details of your errata. Once your 
errata are verified, your submission will be accepted and the errata will be uploaded to our 
website or added to any list of existing errata under the Errata section of that title. 


To view the previously submitted errata, go to https: //www.packtpub.com/books/ 
content/support and enter the name of the book in the search field. The required 
information will appear under the Errata section. 


Piracy of copyrighted material on the Internet is an ongoing problem across all media. At 
Packt, we take the protection of our copyright and licenses very seriously. If you come across 
any illegal copies of our works in any form on the Internet, please provide us with the location 
address or website name immediately so that we can pursue a remedy. 


Please contact us at copyright @packtpub.com with a link to the suspected pirated material. 


We appreciate your help in protecting our authors and our ability to bring you valuable content. 


If you have a problem with any aspect of this book, you can contact us at questions@ 
packtpub.com, and we will do our best to address the problem. 





Installing Magento 2 on 


Apache and NGINX 


In this chapter, we will cover the basic tasks related to installing Magento 2 on Apache and 
NGINX. You will learn the following recipes: 


> 


> 


> 


Installing Apache 

Installing NGINX 

Installing PHP-FPM 

Installing HHVM 

Installing MySQL 

Installing Magento 2 

Installing Magento 2 on Hypernode 
Managing Magento 2 on Docker 


Introduction 


This chapter explains how to install Magento 2 on a hosting environment. When installing 
a new Magento 2 instance, we can use either a Linux, Apache, MySQL, PHP (LAMP) or 
Linux, NGINX, MySQL, PHP (LEMP) setup. Currently, options such as MariaDB or HHVM 
are equivalent to MySQL or PHP. Only HHVM will be converted in this chapter. 


We will install a clean Magento 2 setup on a hosted virtual private server (VPS) for more 
advanced users and an easy-to-use installation on Hypernode. 


The recipes in this chapter will primarily focus on a basic setup of how to install Magento 2. 
However, in some situations, we will dive in deeper related to the subject. 
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While Magento requirements differ from Magento 1, we will be using the latest and finest 
version from PHP, HHVM, NGINX, Apache, Redis, MySQL, and Ubuntu. 


l 
> Creating a new Magento 2 stack could bring up minor issues. 
Always update to the latest available version, if possible. 


Installing Apache 


Throughout the following recipes, we will install the latest Apache 2.4.x version on a Software 
as a Service (SaaS) platform hosted by DigitalOcean. The current Apache version supports 
HTTP/2. This recipe will show you how to do this. 


HTTP/2 is an optimized version of the Hypertext Transfer Protocol (HTTP), 
also known as HTTP version 2 (HTTP/2). Some of the new features of HTTP/2 
A are a more efficient usage of network resources and network latency. HTTP/2 
allows multiple concurrent connections over a single Transmission Control 
Protocol (TCP) connection at once, which optimizes TCP load. Merging CSS 


and JS is not necessary anymore. HTTP/2 service also provides the possibility 
to use server push, which allows a proactive push of resources to the client. 


Getting ready 


For this recipe, you will need to create an account at DigitalOcean https: //www. 
digitalocean.com/. No other prerequisites are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to create an Apache hosting 
environment. The following steps will guide you through this: 


1. The first step is creating an account at https: //cloud.digitalocean.com/ 
registrations. All the steps to create an account are straightforward. Confirm 
your mail and update your billing profile. 


2. Start creating your first Droplet. Choose your hostname, and select your size (2GB 
CPU's or 40GB SSD Disk). Next, pick your region (DigitalOcean has many regions 
available worldwide). Select your image (we will use the latest Ubuntu). Select extra 
available settings such as Private Networking to run multiple servers including an 
Internet network or backup and IPv6 options. If you already have an SSH key, you can 
upload this: 
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Create Droplet 


Droplet Hostname 


Your Droplet 
mage2cookbook.com 


Hostname 


mage2cookbook 


Size 





Select Size $20/mo 
Region 
$ $ $ ; $ i $ f0) , New York 3 
5mo 10 /mo 20 mo 40 imo 8 imo 
$0.007/hou $0.015/hour $0.030/nour $0.060/hour $0.119/hour Image 
15.10 x64 
512 MB 1GB 2 GB 4 GB 8 GB Settings 
20 GB 30 GB 40 GB 60 GB 80 GB 
1000 GB 2 TB 3 TB 4 TB 5 TB 
SSH Keys 
$160/mo 
$0.238/ho 
16 GB 
160 GB 
6TB 








3. The Droplet takes approximately 60 seconds to get created. You will get an e-mail 
right after including all the additional login details such as the hostname, IP address, 
username, and password. 


4. Configure your domain name, yourdomain.com, to the addressed IP address from 


the Droplet: 
yourdomain.com A 1230123 ..123.4 123 
www CNAME yourdomain.com 


5. Connect your Droplet with SSH using your favorite SSH client (putty or terminal) and 
change your password: 


sudo ssh yourdomain.com 


6. First, we will update your server to the latest updates available: 
apt-get update && apt-get -y upgrade 
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7. Next, we will install Apache 2 using a third-party package. Currently, Ubuntu doesn't 
include the latest Apache 2.4.x with HTTP/2 support. The third-party vendor that we 
will use is https://launchpad.net/~ondrej/+archive/ubuntu/apache2. 
Run the following command: 


echo "deb http://ppa.launchpad.net/ondrej/apache2/ubuntu wily 
main" | sudo tee -a /etc/apt/sources.list.d/apache2.list 


echo "deb-src http://ppa.launchpad.net/ondrej/apache2/ubuntu wily 
main" | sudo tee -a /etc/apt/sources.list.d/apache2.list 


8. Before we can install Apache 2, we need to authorize the package by installing a 
signed key: 
apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 
0x4F4EAQOAAE5267A6C 

9. Now, we will update our Ubuntu system using the latest Apache2 packages: 
apt-get update && apt-get -y install apache2 


10. Once every Apache 2 package is installed, we can check whether everything is in 
order by running the following command on the shell: 


apache2 -v 


The output of this command is as follows: 
root@mage2cookbook:~# apache2 -v 


Server version: Apache/2.4.17 (Ubuntu) 


If you have followed steps 1 to 9, you will be able to see if the web server is running. Go to 
your favorite browser and search using your yourdomain.com. 


M In the DigitalOcean control panel, you can create multiple snapshots 


at all times during the recipes. This will help you in restoring an old 
version or just going back in time. 


Let's recap and find out what we did throughout this recipe. In steps 1 through 3, we create a 
clean hosting server setup using DigitalOcean. Next, we connect the Droplet IP to your domain 
name in DNS. After login via SSH, we are able to update the server and continue to the 
process of installing Apache 2 via a third-party repository. Depending on the Ubuntu setup, we 
need to change the version name, such as precise, trusty, wily, vivid, or xenial, to 
install the software. 


In step 8, we submit a key that will validate the repository before we can start installing 
the Apache 2 software. In step 9, we use a simple command to update the repository 
and start installing. 





La] 


Chapter 1 





If you want to check whether Apache is running fine, use one of the following commands: 


service apache2 status 


netstat -anp | grep apache2 


Throughout the following recipes, we will install the latest NGINX 1.9.x version on a SaaS 
platform hosted by DigitalOcean. The current NGINX version supports HTTP/2. This recipe 
will show you how to do it. 


Getting ready 


For this recipe, you will need to create an account at DigitalOcean https: //www. 
digitalocean.com/. No other prerequisites are required. 


sl For this cookbook, we will use a commercial SaaS hosting provider 


to get a production-ready environment. You can use any other 
solution out there to build on your preferred stack. 


How to do it... 


For the purpose of this recipe, let's assume that we need to create an NGINX hosting 
environment. The following steps will guide you through this: 


1. Follow steps 1 until 6 in the previous recipe on how to install Apache. 
2. Then, we will update our server to the latest updates available: 
apt-get update && apt-get -y upgrade 
3. Next, we will install NGINX using the latest mainline version 1.9.x. Currently, Ubuntu 


doesn't include the latest NGINX 1.9.x mainline version. The latest change log can be 
viewed at http: //nginx.org/en/CHANGES. Run the following command: 


echo "deb http://nginx.org/packages/mainline/ubuntu/ wily nginx" | 
sudo tee -a /etc/apt/sources.list.d/nginx.list 


echo "deb-src http://nginx.org/packages/mainline/ubuntu/ wily 
nginx" | sudo tee -a /etc/apt/sources.list.d/nginx.list 
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4. Before we can install NGINX, we need to authorize the package by installing a 
signed key: 
wget http://nginx.org/keys/nginx signing.key | apt-key add nginx_ 
signing.key 

5. Now, we will update our Ubuntu system using the latest NGINX packages: 
apt-get update && apt-get -y install nginx 

6. Once every NGINX package is installed, we can check whether everything is in order 
by running the following command on the shell: 


nginx -v 


The output of this command is as follows: 
root@mage2cookbook:~# nginx -v 
nginx version: nginx/1.9.6 


If you have followed steps 1 to 6, you will be able to see if the web server is running. Go to 
your favorite browser and search using your yourdomain.com. 


<i In the DigitalOcean control panel, you can create multiple snapshots 
` at all times during the recipes. This will help you in restoring an old 
Q version or just going back in time, such as switching from Apache to 
NGINX or back. 


Let's recap and find out what we did throughout this recipe. In steps 1 through 5, we used 
the same Droplet to install NGINX. All steps are alike, but instead of installing Apache, 
we use NGINX instead. The only big difference is that it is an official NGINX repository. 


The current market share of NGINX is around 15% worldwide compared to 50% of Apache on 
active sites. Over the last couple of years, NGINX has grown and is commonly used as a stable 
web server for Magento hosting: 


http://news.netcraft .com/archives/2015/03/19/march-2015-web-server- 
survey .html 


If you want to check whether NGINX is running fine, use one of the following commands: 


service nginx status 


netstat -anp | grep nginx 
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Installing PHP-FPM 


Throughout the following recipes, we will install the latest PHP 7.x version on Apache and 
NGINX. The current PHP-FastCGI Process Manager (PHP-FPM) will be installed through a 
third-party package. This recipe will show you how to do it. 


PHP 7 is the latest version of the PHP stack. It's also known as PHP Next 
Generation (PHP NG) and PHP's answer to HHVM. Currently, it's two to 


v three times faster than PHP 5.x. 
The whole code base is rewritten and uses less memory. Lots of PHP 


functions are backward-compatible with the PHP 5.x code base, so 
upgrading to PHP 7 should be easy. 


Getting ready 


For this recipe, you will need a preinstalled Apache or NGINX setup. No other prerequisites 
are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to create an PHP-FPM hosting 
environment. The following steps will guide you through this: 


1. 
2. 


First, we will start installing PHP-FPM on Apache; later, we will do the same with NGINX. 


Next, we will install PHP 7 on Apache 2 using a third-party package. Currently, 
Ubuntu doesn't include the latest PHP 7 yet. The third-party vendor that we will 
use is https ://launchpad.net/~ondrej/+archive/ubuntu/php. 
Run the following command: 


echo "deb http://ppa.launchpad.net/ondrej/php/ubuntu wily main" | 
sudo tee -a /etc/apt/sources.list.d/php.list 


echo "deb-src http://ppa.launchpad.net/ondrej/php/ubuntu wily 
main" | sudo tee -a /etc/apt/sources.list.d/php.list 


As we have already used the authorized Apache package from the same vendor, we 
are okay on the signed key. There is no need to install the key anymore. 
Now, we will update our Ubuntu system using the latest PHP 7 packages: 


apt-get update && apt-get -y install php7.0 php7.0-fpm php7.0-dev 
php7.0-mhash php7.0-mcrypt php7.0-curl php7.0-cli php7.0-mysql 
php7.0-gd php7.0-intl php7.0-xs1l 
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5. 





Once every PHP 7 package is installed, we can check whether everything is in order 
by running the following command on the shell: 


php -v 


The output of this command is as follows: 

root@mage2cookbook: /etc/php# php -v 

PHP 7.0.0 (cli) ( NTS ) 

Copyright (c) 1997-2015 The PHP Group 

zend Engine v3.0.0-dev, Copyright (c) 1998-2015 Zend Technologies 


Now, we will configure PHP-PFM with Apache. Out of the box, Apache 2 comes with a 
module named mod_proxy, which we will use to connect Apache to PHP-FPM. We will 
be using PHP-FPM in TCP mode instead of the Unix socket. The main reason is that 
it's easy to configure and we can use it later with HHVM. The default port 9000 will be 
our connector. To enable mod_proxy, run the following command on the shell: 


a2enmod proxy fcgi 


Before we can connect Apache to PHP-FPM, we need to give PHP-FPM instructions to 
listen to the correct internal port. Run the following command from the shell: 


sed -i "s/listen =.*/listen = 127.0.0.1:9000/" /etc/php/7.0/fpm/ 
pool.d/www.conf 


You can do this manually as well; edit the www. conf file with your favorite editor in 
your PHP-FPM pool directory. Search for listen = /var/run/php/php7.0-fpm. 
sock and change this to listen = 127.0.0.1:9000. 


Restart your PHP-FPM process to use the altered changes. Run the following 
command from the shell: 


service php7.0-fpm restart 


Next, we need to configure Apache using the currently set-up internal proxy_fegi 
module. The default Apache Virtual Host configuration file is located at /etc/ 
apache2/sites-enabled/000-default.conf. Edit this file and add the 
following code just before the closing </VirtualHost> tag on one line without 
any breaks: 

ProxyPassMatch */(.*\.php(/.*)?)$ fcegi://127.0.0.1:9000/var/www/ 
html/$1 
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10. 


11. 


The following code is for the new 000-default.conf: 


<VirtualHost *:80> 

ServerAdmin webmaster@localhost 
DocumentRoot /var/www/html 
<Directory /var/www/html> 
Options Indexes FollowSymLinks 
AllowOverride All 

Order allow,deny 

allow from all 

</Directory> 


ErrorLog ${APACHE LOG DIR}/error.log 
CustomLog ${APACHE LOG DIR}/access.log combined 


ProxyPassMatch */(.*\.php(/.*)?)S fegi://127.0.0.1:9000/var/www/ 
html/$1 
</VirtualHost> 


You can change DocumentRoot /var/www/html to any given preferred directory. 
However, for the rest of the recipes, we will stay with the default. 


After saving the Apache configuration, we need to restart the web server. Run the 
following command from the shell: 

service apache2 restart 

Now, we need to check whether Apache and PHP-FPM are working fine. Go to the cd 
/var/www/html directory and create the following file including content: 

echo "<?php phpinfo(); ?>" > phpinfo.php 





www.allitebooks.com 
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12. If you have followed steps 1 to 11, you will be able to see if PHP-FPM works with your 


web server. Go to your favorite browser and search using your yourdomain.com/ 
phpinfo.php. 


You should now see a phpinfo page like the following screenshot. Check on the 
second line for the Server API; this should be FPM/FastCGl. 











































































































—— Scr x 
J D phpinfoo x‘ 
e Œ [Ì mage2cookbook.com/phpinfo.php AES M 
PRP) 
System Linux mage2cookbook.com 4.2.0-16-generic #19-Ubuntu SMP Thu Oct 8 15:35:06 UTC 2015 x86_64 
Server API FPM/FastCGl 
Virtual Directory Support disabled 
Configuration File (php.ini) Path Jetc/php/7.Ofipm 
Loaded Configuration File Jetc/php/7 .Ofipmiphp ini 
Scan this dir for additional .ini files Jetc/php/7 .O/ipmiconf.d 
Additional .ini files parsed (none) 
PHP API 20151012 
PHP Extension 20151012 
Zend Extension 320151012 
Zend Extension Build API320151012,NTS 
PHP Extension Build API20151012,NTS 
Debug Build no 
Thread Safety disabled 
Zend Signal Handling disabled 
Zend Memory Manager enabled 
Zend Multibyte Support provided by mbstring 
IPv6 Support enabled 
DTrace Support enabled 
Registered PHP Streams https, ftps, compress.zlib, php, file, glob, data, http, ftp, phar, zip 
Registered Stream Socket Transports tcp, udp, unix, udg, ssi, tis, tisv1.0, tisv1.1, tisv1.2 
Registered Stream Filters zlib.*, converticonv.*, merypt.*, mdecrypt*, string.rot13, string.toupper, string.tolower, string.strip_tags, convert", = 





If everything is working fine, we have completed the Apache PHP-FPM setup. Now let's 
do the same for the NGINX and PHP-FPM setup. 


As we have already installed the PHP-FPM packages in steps 1 to 5, we now need to 
combine them with NGINX. 


Before we continue, it is important to use either a clean DigitalOcean Droplet with 
NGINX running or you can disable the Apache server using the following command 
form the shell: 


service apache2 stop && service nginx start 
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13. Next, we need to configure NGINX. The default NGINX configuration file is located at 
/etc/nginx/conf.d/default.conf. Remove the old configuration in this file 
and add the following code: 
server { 

listen 80; 
server name yourdomain.com; 


root /var/www/html ; 
index index.php index.html; 


access log /var/log/nginx/access.log; 
error_log /var/log/nginx/error.1log; 


location ~ \.phps { 


fastcgi_index index.php; 

fastcgi_ pass 127.0.0.1:9000; 

fastcgi_param SCRIPT_FILENAME 
$document_root$fastcgi_script_name; 

include fastcgi_ params; 


} 


location ~ /\.ht { 
deny all; 


} 
} 


14. Save the new configuration using your favorite editor and restart your NGINX and 
PHP-PFM server using the following command on the shell: 


service nginx restart && service php7.0-fpm restart 


Anice trick to test if your configuration is correct is as follows: 


nginx -t 


If you have followed steps 13 to 14, you will be able to see if PHP-FPM works with your web 
server. Go to your favorite browser and search using your yourdomain.com/phpinfo.php. 


You should now see a phpinfo page similar to the one on the previous page during the Apache 
PHP-FPM setup. Check on the second line for the Server API; this should be FPM/ FastCGI. 
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Downloading the example code 

You can download the example code files for this book from your 
account at http: //www.packtpub.com. If you purchased this book 
elsewhere, you can visit http: //www.packtpub.com/support 
and register to have the files e-mailed directly to you. 

You can download the code files by following these steps: 


>» Login or register to our website using your e-mail address 

and password. 

Hover the mouse pointer on the SUPPORT tab at the top. 

Click on Code Downloads & Errata. 

Enter the name of the book in the Search box. 

Select the book for which you're looking to download the 

code files. 

>» Choose from the drop-down menu where you purchased this 
book from. 

>» Click on Code Download. 


al 


Q 


v v v v 


Once the file is downloaded, please make sure that you unzip or extract 
the folder using the latest version of: 

> WinRAR / 7-Zip for Windows 

> Zipeg/ iZip / UnRarX for Mac 

>  7-Zip / PeaZip for Linux 


Let's recap and find out what we did throughout this recipe. In steps 1 through 4, we first 
install PHP-FPM from a third-party repository. The main reason that we use this repository is 
that it is easy to use and well-supported. Current Ubuntu versions don't have the latest PHP 7 
available yet. If you are comfortable installing PHP from source, you can do so. 


All PHP modules listed in step 4 are mandatory for Magento 2 to work properly. In step 6, we 
explain why we use PHP-FPM running on port 9000. Setting up a TCP port is much easier when 
using multiple PHP backends, switching from Apache to NGINX, or PHP-FPM versus HHVM. 


In step 7, we add an Apache module that acts as a proxy, So we are able to connect PHP-FPM 
to Apache. 


In step 8, we changed the PHP-FPM pool to switch from Unix sockets to TCP. If you prefer 
sockets, you can do so. 


In step 10, we add the ProxyPassMatch rule to our Apache configuration file, which will serve 
all incoming PHP requests to the PHP-FPM server. After saving and restarting the Apache 
server, we are able to test if everything works. 
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In step 13, we configure NGINX to work with PHP-PFM. Creating fastcgi_pass does the trick 
to connect to port 9000. 


If you want to check whether PHP-FPM is running fine, use one of the following commands: 


service php7.0-fpm status 


netstat -anp | grep php-fpm 

To check which server is running, check the headers by running the following command: 
curl -I http://mage2cookbook.com/phpinfo.php 

The output of this command will be as follows: 


root@mage2cookbook:~# curl -I http://mage2cookbook.com/phpinfo.php 
HTTP/1.1 200 OK 


Server: nginx/1.9.6 
Once we switch back to Apache we will see the following: 


service nginx stop && service apache2 start 

root@mage2cookbook:~# curl -I http://mage2cookbook.com/phpinfo.php 
HTTP/1.1 200 OK 

Server: Apache/2.4.17 (Ubuntu) 


A Use phpinfo.php wisely on a production environment. Sharing 
Q this information on a production website is not advised and could 
expose your security risks. 


Throughout the following recipes, we will install the latest HHVM 3.9.x version on Apache and 
NGINX. HHVM has gained large popularity over the last couple of year and is well-known for its 
high performance on Magento. While Magento 1 was not supported by default, Magento 2 is. 
This recipe will show you how to do it. 


i HHVM (also known as the HipHop Virtual Machine) is a virtual machine for 
>< PHP developed by Facebook, with an associated just-in-time (JIT) compiler. 
Q Deploying HHVM on a Magento 2 website should lead to performance 
improvements across your web shop. 
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Getting ready 


For this recipe, you will need a preinstalled Apache or NGINX setup. No other prerequisites 
are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to create an HHVM hosting 
environment. The following steps will guide you through this: 


1. 
2. 


First, we will start installing HHVM on Apache; later, we will do the same with NGINX. 


Next, we will install HHVM on Apache2 using the official prebuilt package by 
Facebook. Run the following command on the shell: 

echo "deb http://dl.hhvm.com/ubuntu wily main" | sudo tee -a /etc/ 
apt/sources.list.d/hhvm.list 


Before we can install HHVM, we need to authorize the package by installing a 
signed key: 

apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 
0x5al6e7281be7a449 

Now we will update our Ubuntu system using the latest HHVM packages: 

apt-get update && apt-get -y install hhvm 

Once every HHVM package is installed, we can check whether everything is in order 
by running the following command on the shell: 


hhvm --version 


The output of this command is as follows: 
root@mage2cookbook:~# hhvm --version 


HipHop VM 3.10.1 (rel) 


Since the setup of PHP-FPM, we have started using the internal port 9000 to handle 
all traffic on PHP. Now we will use the same port for HHVM. Stop PHP-FPM as it is still 
running and start HHVM using the following command from the shell: 


service php7.0-fpm stop && service hhvm start 


If you need to run dedicated HipHop code such as Hack (the default HipHop 
programming language) in the future, you may want to change your Apache 
configuration. Restart your Apache and HHVM server: 


ProxyPassMatch */(.+\. (hh|php) (/.*)?)$ fegi://127.0.0.1:9000/var/ 
www/html/$1 
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8. Now, let's check whether HHVM and Apache are working. Create a PHP file called 


hhvm. php in the /var/www/html directory: 
<?php 
if (defined('HHVM VERSION')) { 
echo "HHVM"; 
} else { 
echo "PHP"; 


} 


If you have followed steps 1 to 8, you will be able to see if HHVM works with your web 
server. Go to your favorite browser and search using your yourdomain.com/hhvm. 
php. You should now see a HHVM notice on your screen. 


In newer versions of HHVM, the default phpinfo () ; tag works just fine on your 
screen. Go to your favorite browser and search using your yourdomain.com/ 
phpinfo.php: 








D HHVM phpinfo Q 


e 





jlo (2 al 
C [D mage2cookbook.com/phpinfo.php |= 


HHVM Version 3.10.1 





Version 


Version | 3.10.1 





Version 
ID 31001 











Debug 
ne tags/HHVM-3.10.1-0-2689b4969a141620ce5a282ceOdbf72278c84d44b 
Repo 6c99ee1f98340f6f3ef397a332583f0e843a627d 
Schema 
iad 5.6.99-hhvm 

ersion 
ge 2.4.99 
Version 

5 Linux mage2cookbook.com 3.19.0-31-generic #36-Ubuntu SMP Wed Oct 7 1 


5:04:02 UTC 2015 x86_64 














INI 














allow_url_fopen | 1 | 
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9. If everything is working fine, we have completed the Apache HHVM setup. Now let's 
do the same for the NGINX and HHVM setup. 


As we have already installed the HHVM packages in steps 1 to 5, we now need to 
combine them with NGINX. 


10. Before we continue, it is important to use either a clean DigitalOcean Droplet with 
NGINX running or you can disable the Apache server using the following command 
from the shell: 


service apache2 stop && service nginx start 


The following is the content of NGINX configuration file: 
server { 

listen 80; 

server name yourdomain.com; 


root /var/www/html ; 
index index.php index.html; 


access log /var/log/nginx/access.log; 
error_log /var/log/nginx/error.1log; 


location ~ \.(hh|php)$ { 


fastcgi_index index.php; 

fastcgi_ pass 127.0.0.1:9000; 

fastcgi_param SCRIPT_FILENAME 
S$document_root$fastcgi_script_name; 

include fastcgi_params; 


} 


location ~ /\.ht { 
deny all; 
} 
} 


In the preceding example, we altered the location for PHP and Hack support: 
location ~ \.(hh|php)$ { 

11. You can now restart your NGINX and HHVM server to connect them using the follow 
command from the shell: 


service nginx restart && service hhvm restart 
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12. Now let's check whether HHVM and NGINX are working. Create a PHP file called 
hhvm. php or use the one in the previous Apache HHVM setup in the /var/www/ 
html directory: 
<?php 
if (defined('HHVM VERSION')) { 

echo "HHVM"; 
} else { 
echo "PHP"; 


} 


If you have followed steps 9 to 11, you will be able to see if HHVM works with your web server. 
Go to your favorite browser and search using your yourdomain.com/hhvm. php. 


You should now see a HHVM notice on your screen, but you can also use yourdomain.com/ 
phpinfo.php. 


Let's recap and find out what we did throughout this recipe. In steps 1 through 4, we use the 
official HHVM repository and install the software. The installation process is similar to the 
PHP-FPM setup. The important difference between HHVM and PHP-FPM is that HHVM does 
not have additional modules to install. 


In step 7, we change ProxyPassMatch a little bit, and add the . hh extension parameter 
only. By default, the .hh extension is used only when creating HipHop (Hack)-dedicated code. 


In step 10, we do the same procedure for NGINX. The only thing that we change is the 
. hh extension in the location. As HHVM runs by default on port 9000, we do not change 
anything here. 


If you want to check whether HHVM is running fine, use one of the following commands: 


service hhvm status 


netstat -anp | grep hhvm 
To check which server is running, check the headers by running the following command: 


curl -I http://mage2cookbook.com/hhvm. php 
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The output of this command is as follows: 


root@mage2cookbook:~# curl -I http://mage2cookbook.com/hhvm. php 
HTTP/1.1 200 OK 
Server: nginx/1.9.6 


X-Powered-By: HHVM/3.10.1 
Once we switch back to Apache, we will see the following: 


service nginx stop && service apache2 start 
root@mage2cookbook:~# curl -I http://mage2cookbook.com/hhvm. php 
HTTP/1.1 200 OK 

Server: Apache/2.4.17 (Ubuntu) 

X-Powered-By: HHVM/3.10.1 


Installing MySQL 


Throughout the following recipes, we will install the latest MySQL 5.7.x version on Apache 
and NGINX. The current MySQL version is a milestone in the open source world. Its new 
performance and scalability features will be a great benefit for every Magento website. 
This recipe will Show you how to do it. 


RS. MySQL 5.7 is an extremely exciting new version of the world's most 
popular open source database, which is two times faster than MySQL 5.6 
while also improving usability, manageability, and security. 


Getting ready 


For this recipe, you will need a preinstalled Apache or NGINX and PHP-FPM or HHVM setup. 
No other prerequisites are required. 


How to do it... 


Before we can install the latest MySQL version, we need to download the software in our local 
system. The official MySQL APT repository provides you with a simple and convenient way to 
install and update MySQL products. Always use the latest software package using apt-get. 


1. We will now install MySQL using the official vendor package. Run the following 
command from your root or home directory: 


wget http://dev.mysql.com/get/mysql-apt-config 0.5.3-1 all.deb 
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2. To download the rest of the latest MySQL package, we first install the mysql -apt- 
config package. Run the following command: 


dpkg -i mysql-apt-config 0.5.3-1 all.deb 


During installation, it will ask which MySQL product you wish to configure. Select Server: 





teda 





Configuring mysql-apt-config 
MySQL APT Repo features MySQL Server along with a variety of MySQL 
components. You may select the appropriate product to choose the version that 
you wish to receive. 


Once you are satisfied with the configuration then select last option 'Apply' 
to save the configuration. Advanced users can always change the 
configurations later, depending on their own needs. 


Which MySQL product do you wish to configure? 


connector-python 
mysql-utilities 
router 
workbench 

Apply 














Next, it will ask which Server version you wish to receive. Select mysqI-5.7: 





LS | © je 


configuration a 





Configuring mysql-apt-config 
This configuration program will detect the current state of your system, 
check for any installed MySQL Server packages, and try to select the most 
appropriate version of MySQL Server to be installed. If you are not sure 
which version to choose for yourself, do not change the auto-selected 
version. Advanced users can always change the version later, depending on 
their own needs. 


Which server version do you wish to receive? 


mysql-5.6 


mysql-5.7-dmr 
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In the next screen, click on Apply: 





Configuring mysql-apt-config 
MySQL APT Repo features MySQL Server along with a variety of MySQL 
components. You may select the appropriate product to choose the version that 
you wish to receive. 


Once you are satisfied with the configuration then select last option 'Apply' 
to save the configuration. Advanced users can always change the 
configurations later, depending on their own needs. 


Which MySQL product do you wish to configure? 


Server 
connector-python 
mysql-utilities 
router 

workbench 














3. Now, we will update our Ubuntu system using the latest MySQL packages: 
apt-get update && apt-get -y install mysql-server 

4. During installation, it will ask you several questions. The first one will be to 
choose a new password for the MySQL root user. Always make sure to create a 


new dedicated user only for a database; using root is just an example and not 
advised on production. 


5. Once every MySQL package is installed, we can check whether everything is in order 
by running the following command on the shell: 


mysql --version 


The output of this command is as follows: 
root@mage2cookbook:~# mysql --version 


mysql Ver 14.14 Distrib 5.7.9, for Linux (x86 64) 


Let's recap and find out what we did throughout this recipe. In steps 1 through 3, we download 
the official MySQL package and use a graphical interface to install the latest version. The 
whole process is pretty straightforward. Remember to use a dedicated user that has all the 
privileges instead of the root user. 
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If you want to check whether MySQL is running fine, use one of the following commands: 
service mysql status 
netstat -anp | grep mysql 


After the MySQL server installation is finished, you can log in on the shell using the 
following command: 


mysql -u root -p 


Installing Magento 2 


Throughout the following recipes, we will install Magento 2 on a preconfigured SaaS platform 
hosted by DigitalOcean. Installing Magento 2 differs a lot from the current Magento 1 version. 
An important change is the use of Composer. We will use Composer to install all the third-party 
modules and manage the core of Magento 2. This recipe will show you how to do it. 


sl Composer is a dependency management tool for PHP. It allows you 


to declare the software libraries for your project. It will help you 
install or update them. 


Getting ready 


For this recipe, you will need a preinstalled Apache or NGINX, PHP or HHVM and MySQL setup. 
No other prerequisites are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to create a Magento 2 hosting 
environment. The following steps will guide you through this: 


1. First, we will start installing Magento 2 on Apache; later, we will do the same with 
NGINX. Throughout this recipe, you can use PHP-FPM or HHVM. For now, we will 
focus only on PHP-FPM. 

2. Installing Composer is pretty straightforward. For the rest of the recipes, we will 
be installing Composer in the /usr/local/bin directory. This way, we can use 
it system-wide. Run the following command on the shell in the /usr/local/bin 
directory: 


curl -sS https://getcomposer.org/installer | php 
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If you have not installed curl yet, you may need to run the following command on 
the shell: 


apt-get -y install curl 


To check whether Composer is working fine, run the following command: 
mv composer.phar composer 


. /composer 


You will get the following output: 





| E car 














root@mage2cookbook: /var/www/html# composer a 
/ / 
E£ ne WV ee V V faM / 
| ie Soe ae ed ee a Sa ae E eM) ee E i 
\ /\ EER ae N a a f i OEE Dee 
EF 


Composer version 1.0-dev (2f069bffd2e9c9acfebf993cc2a6d08ec867b52e) 2015-11-14 16:19:45 


Usage: 
command [options] [arguments] 


(Options: 
-h, --help Display this help message \ 
I =a Do not output any message 


-V, Display this application version 
Force ANSI output 


Disable ANSI output 








-n, no-interaction Do not ask any interactive question 
--profile Display timing and memory usage information 
-d, --working-dir=WORKING-DIR If specified, use the given directory as working directory. 
-v|vv|vvv, --verbose Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug 


[Available commands: 











about Short information about Composer 
archive Create an archive of this composer package 
browse Opens the package's repository URL or homepage in your browser. 
clear-cache Clears composer's internal package cache. 
clearcache Clears composer's internal package cache. 
config Set config options 
create-project Create new project from a package into given directory. 
depends Shows which packages depend on the given package 
diagnose Diagnoses the system to identify common errors. 
dump-autoload Dumps the autoloader 
dumpautoload Dumps the autoloader 
global Allows running commands in the global composer dir ($COMPOSER_HOME) . 
help Displays help for a command 
home Opens the package's repository URL or homepage in your browser. 
info Show information about packages 
init Creates a basic composer.json file in current directory. 
install Installs the project dependencies from the composer.lock file if present, or falls back on the composer.json. 
licenses Show information about licenses of dependencies = 
list Lists commands 
remove Removes a package from the require or require-dev 
require Adds required packages to your composer.json and installs them 
run-script Run the scripts defined in composer.json. 
search Search for packages 
self-update Updates composer.phar to the latest version. 
selfupdate Updates composer.phar to the latest version. 
show Show information about packages 
status Show a list of locally modified packages 
suggests Show package suggestions 
update Updates your dependencies to the latest version according to composer.json, and updates the composer.lock file. 
validate Validates a composer.json and composer.lock 
root@mage2cookbook: /var/www/html¢# I 

















While we will be using a search-friendly URL in Magento, we need to enable the 
Apache mod_rewrite module before we can continue. Run the following code 
on the shell: 


a2enmod rewrite 
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Restart your Apache server to complete the new configuration. Run the following code 
on the shell: 


service apache2 restart 


If you see the following output on your screen, everything is correct: 
root@mage2cookbook: /var/www/html# a2enmod rewrite 
Enabling module rewrite. 

To activate the new configuration, you need to run: 


service apache2 restart 


Installing Magento 2 can be done in several ways. First, we will 
be showing you how to install it using the latest version from the 
GitHub release branch. Download the complete package and 
unzip or untar the files in your /var/www/htm1 directory. 


The URL for the latest releases is https: //github.com/ 
magento/magento2/releases. 


Make sure that your /var/www/htm1 has no files in it anymore. 
(Use the rm * command to clean up.) 


f 


Execute either of the following commands: 


wget https://github.com/magento/magento2/ 
archive/2.0.0.zip 


wget https://github.com/magento/magento2/ 
archive/2.0.0.tar.gz 


While extracting your files, make sure to move or copy them in to 
the /var/www/html directory. 


Now let's set the ownership and permissions: 
chown -R www-data:www-data /var/www/html 


find . -type d -exec chmod 770 {} \; && find . -type f -exec chmod 
660 {} \; && chmod u+x bin/magento 


Now we use Composer to resolve all of our dependencies. Run the following 
command on the shell: 


cd /var/www/html/ && composer install 
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If your installation is set up correctly, the installation will continue, using the 
correct PHP modules. However, if, in some way, your PHP installing is not 
correct, you may get the following error messages. Update your system and 
try again: 
Your requirements could not be resolved to an installable set of packages. 
Problem 1 

- The requested PHP extension ext-gd * is missing 
from your system. 
Problem 2 

- The requested PHP extension ext-curl * is missing 
from your system. 
Problem 3 


- The requested PHP extension ext-intl * is missing 
from your system. 


5. During the installation process, you will get a notice to create a GitHub OAuth token. 
The download rate limit is pretty small. Copy the URL from your shell window in your 
browser, log in at GitHub, or create an account and token: 





New personal access token 


Token description 





[Composer on mage2cookbook.com 2015-11-09 1333 





What's this token for? 


Select scopes 


Scopes /imit access for personal tokens. Read more about OAuth scopes. 

4% repo@ repo:status @ repo_deployment © 
public_repo © delete_repo © user @ 
user:email @ user:follow ®© admin:org @ 
write:org @ read:org @ admin:public_key @ 
write:public_key @ read:public_key @ admin:repo_hook © 
write:repo_hook @ read:repo_hook @ admin:org_hook @ 
gist @® notifications © 

Generate token 





tion like ordinary OAuth access tokens. They can be used instead of a password for Git 


@ Personal ac o 
or can be used to authenticate to the API over Basic Authentication 


over HTTP 
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Copy the generated token in the command prompt of your current shell window and 
the token will be saved for future reference in /root/.composer/auth.json. You 
can continue the rest of the installation. 


6. Next, we will be using the setup wizard to continue the rest of the installation. In 
Chapter 2, Magento 2 System Tools, we will be using the shell installation method. 
Go to your favorite browser and run the following URL: 


http: //mage2cookbook.com/setup 
As a result, we will get the following screen: 














Jene 


@ Installation x 


e œŒ [D mage2cookbook.com/setup 


Q Magento 


Version 2.0.0 


Welcome to Magento Admin, your online store headquarters. 
Click ‘Agree and Set Up Magento' or read Getting Started to learn 
more. 


Terms & Agreement 


Agree and Setup Magento 

















7. Nowclick on Agree and Setup Magento. 
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8. Let's start analyzing the readiness of your setup. Click on the Next button: 


M A 





o 
Readiness Add Web 
Check a Database Configuration 
Customize Create Install 


Your Store Admin Account 


Step 1: Readiness Check 


Let's check your environment for the correct PHP version, PHP 
extensions, file permissions and compatibility. 


Start Readiness Check 


9. Magento 2 now will check your hosting setup for the correct PHP version, PHP 
modules, PHP settings, and file permissions, as shown in the following screenshot: 














<~ Completed! You can now move on to the next step. 


PHP Version Check 
Your PHP version is correct (7.0.0). 


PHP Settings Check 
Your PHP settings are correct. 


PHP Extensions Check 
You meet 13 out of 13 PHP extensions requirements. 
Show detail 


File Permission Check 
You meet 4 out of 4 writable file permission requirements. 
Show detail 

















10. Continue the installation flow and commit your database credentials in the 


following screen: 


@ Add a Database 





€ > CŒ |D mage2cookbook.com/setup/#/add-database 








A 


o © a 


Readiness Add Web 
Check a Database Configuration 


4 5 


Customize Create 
Your Store Admin Account 


Step 2: Add a Database 


Database Server Host * 





localhost 





Database Server Username * 





root 





Database Server Password 





(not always necessary) 





Database Name * 





magento 





Table prefix 





(optional) 
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11. In Step 3, we will set up our store address and administrator address. In Advanced 
Options, we are able to pick HTTPS, Apache rewrites, encryption key, and where to 
store the session key: 


M Web Configuration x \_ 





e C | D mage2cookbook.com/setup/#/web-configuration 


Q 


Readiness Add Web 
Check a Database Configuration 
Customize Create Install 


Your Store Admin Account 


Back Next 


Step 3: Web Configuration 


Your Store Address 


http://mage2cookbook.com/ 


Magento Admin Address * 
http://mage2cookbook.com/ 


admin 


Advanced Options ©) 
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Step 4 gives you the opportunity to choose your time zone, currency, and language. 
In Magento 2, there is a brand new option to pick which modules need to be 


installed. You can easily select them by just clicking the checkbox, as shown 


in the following screenshot: 


E 























= 
Mì Customize Your Stor x \ j 
ea D mage2cookbook.com. setup/#/customize-your-stonyy = 
Readiness Add Web 
Check a Database Configuration 
Customize Create Install 


Your Store Admin Account 


Step 4: Customize Your Store 


Store Default Time Zone* 


GMT (UTC) 


Store Default Currency * 


US Dollar (USD) 


Store Default Language * 


English (United States) 


Advanced Modules Configurations © 


v| Select All 


v| Magento_AdminNotification 


v| Magento_AdvancedPricingimportExport 














www.allitebooks.com 
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12. In Step 5, you can choose your username and password: 








M Create Admin Accou x \ 
e 


CŒ | O mage2cookbook.com/setup/#/create-admin-acco 
| 








uy? = 


Step 5: Create Admin Account 


Create a new Admin account to manage your store. 


New Username * 
New Email* 
New Password * 


Confirm Password * 























13. Now we are almost there; the final Step 6 will start installing our Magento 2 environment 







@ Install 
e (e 


M 


x \ 








O mage2cookbook.com/setup/#/install 


o (2) 8 
| Readiness Add Web 
| Check a Database Configuration 
14) 9 o 
Customize Create Install 
Your Store 


Admin Account 


Step 6: Install 


You're ready! 


Install Now 
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The installation step is really fast in Magento 2 and is done within a minute 
depending on your server. If you get an error in the console screen, such 
as a missing database, create one via the shell with the following command: 


mysql -u root -p 


create database magento; 


Installation of Magento 2 can be seen in the following screenshot: 





@ Install x \ 
< CŒ [D mage2cookbook.com/setup/#/install F oY 
Step 6: Install 


Installing... 65% 


Console Log + 


ng Magento installation: 
e ssions check.. 


rmi 
Enabling Maintenance Mode... 

Installing deployment configuration... 
Installing database scł 


chi 
Schema creation/updates: 
' 


Module 'Manentn Stare! 

















14. Congratulations, you have successfully installed Magento 2. You will be given 
administrative information on your login and store address. 


For security reasons, you may want to alter the write permissions of your /app/etc 
directory to only read permissions with the following command: 


chmod -R 440 /var/www/html/app/etc 
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15. 


16. 


17. 





Now we will focus on the configuration of Magento 2 on NGINX. We don't need 
to reinstall Magento 2; we just need to alter the current NGINX setup with the 
appropriate setting. 


Now, let's go to the NGINX configuration directory and update default .conf 
in /etc/nginx/conf.d. Open the default .conf file and change it with the 
following settings: 
upstream fastcgi_backend { 

server 127.0.0.1:9000; 
} 
server { 

listen 80; 


server name yourdomain.com; 





set SMAGE ROOT /var/www/html; 
set SMAGE MODE developer; 


include /var/www/html/nginx.conf.sample; 


access log /var/log/nginx/access.log; 
error_log /var/log/nginx/error.1log; 


location ~ /\.ht { 
deny all; 
} 
} 


As you can see, we are now using an upstreamand set SMAGE setting and have 
removed the fastcgi_pass 

However, the most important element is the Magento 2 nginx.conf.sample file, 
which is in the root directory of your Magento 2 instance. For now, it is easy to include 
this directory but not advised on a production level. It's best that you copy this file 

to your NGINX configuration directory and store it there. Don't forget to change the 
following setting: 


include /var/www/html/nginx.conf.sample; 

Save your configuration and run the following command to check whether your 
settings are correct. If not, change your configuration: 

nginx -t 

If your syntax is okay and the test is successful, then restart your NGINX server. Don't 
forget to stop your Apache server. Run the following command on the shell: 


service apache2 stop && service nginx start 
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To check whether you are running NGINX, use the following command: 

curl -I http://mage2cookbook.com/ 

root@mage2cookbook:~# curl -I http://mage2cookbook.com/HTTP/1.1 
200 OKServer: nginx/1.9.6 


18. Congratulations, you just finished the installation of Magento 2 on NGINX. 


Let's recap and find out what we did throughout this recipe. In steps 1 and 2, we install 
Composer. Composer is our most important element before we can start installing Magento 
2. As we are using Apache, we need to enable the mod_rewrite module, which is mandatory in 
Magento 2. Next, we download the latest Magento 2 version from GitHub and unzip the code 
in our directory. 


In step 4, we check whether our setup is resolving all dependencies. Depending on the 
outcome, we need to install or enable the additional PHP modules. 


In step 5, we create a GitHub token and store it in the auth. j son file. We need this because 
the download rate limit is small when downloading additional software dependencies. 


In step 6, we use the Magento 2 setup directory to install via the graphical user interface. All 
the remaining steps till 12 are self-explanatory. 


In step 14, we switch from Apache to NGINX. The configuration file contains the following 
important elements: nginx.conf.sample, upstream fastcgi_backend, and $MAGE to 
finish our setup. The upstream parameter makes sure that all PHP requests are connected to 
PHP-FPM, the SMAGE variable connects the web directory, and include refers to the master 
configuration file. 


If you want to check which Apache modules are enabled, use the following command: 
apachectl -M 


The equivalent for NGINX to check your modules is nginx -V. 


Installing Magento 2 on Hypernode 


Throughout the following recipes, we will install Magento 2 on a fully managed platform 
hosted by Hypernode. Hypernode is an advanced platform for successful Magento shops. 
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Hypernode is a radically different approach to Magento hosting that actively improves your 
shop's performance. Its unique Magento platform is developed by Byte Internet, a Dutch 
hoster with eight years of experience in hosting Magento. 


Hypernode has been developed in close consultation with Magento developers, with the 
objective of having Magento web shops perform to the best advantage and make its 
development several times easier. This recipe will show you how to do it. 


With Hypernode, you will get your own fully managed isolated cloud 
server. This server has been fully configured for Magento 2. The 

-A best and latest software such as NGINX, HHVM, PHP-FPM, Redis, 
and MySQL are installed as a standard. In addition, they offer all the 
tools that you, as a Magento developer, would need in order to work 
comfortably: New Relic, Git, Vagrant, and Magento-specific tools such 
as ModMan, N98 Magerun, Sphinx Search, and much more. 


The following image illustrates working of Hypernode which can be found at https: //www. 
hypernode.com/: 





Your Magento shop 
Hypernode— Magento Development Tools 


Magento Platform Optimization 


Managed VPS 





Basic Platform 











Unmanaged VPS 





Network & Hardware 

















Getting ready 


For this recipe, you will need to create an account at Hypernode https: //www.hypernode. 
com/. No other prerequisites are required. 
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How to do it... 


For the purpose of this recipe, let's assume that we need to create a Magento 2 hosting 
environment on the Hypernode platform. The following steps will guide you through this: 


1. 


First, we start by creating a user account for Hypernode. 
There are two options to create a Hypernode. 


The first option is a default clean Magento 2 setup using the link, https: //auth. 
byte.nl/account/register/magento2, and committing your name, e-mail, 
company name, and so on. For the following steps, make sure to submit the correct 
cell number. You will get a text message to confirm that this account is valid and not 
spam. Now perform steps 2 through 9 to set up Magento 2 the easy way. 


If you want to start using Magento 1 before switching to Magento 2, then follow all of 
the steps until step 11. To do so, use the link, https: //auth.byte.nl/account / 
register/hypernode/, and commit your name, e-mail, company name, and so on. 
For the following steps, make sure to submit the correct cell number. You will get a 
text message to confirm that this account is valid and not spam. 


Now, open up your mail account, and confirm the e-mail that you received from Byte 
Internet. Next, you will be prompted with a text message on your cell phone; commit 
the code to continue. Make sure to pick a password for the Hypernode control panel, 
which we will use later. 


Next, commit your domain name, or any other name that will relate to this setup. 
The name will be used to create a subdomain on the Hypernode. The name could 
be called yourdomain.hypernode.io. 


After submitting your domain name, creating the Hypernode will take between 20-30 
minutes, or less. All current Hypernodes are created on the same hosting platform 
that we used before at DigitalOcean. The difference between this setup for Magento 
2 is that it is a managed setup. So we don't need to configure PHP, MySQL, NGINX, 
and so on. 


Now go to the Hypernode control panel to check the current status on the creation of 
the Hypernode. Go to https://service.byte.nl. 
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6. Click on your domain name and then click on Hypernode settings in the control panel. 
Here, you will find the current status and health of your setup: 





Hypernode settings 


General information 


Application name magento2cookbook 
Application type Magento 
Application host magento2cookbook.hypernode.io 


SSH information 


SSH Hostname magento2cookbook.hypernode.io 
SSH Username app 
SSH Authorized Keys Manage keys > 


SSL information 


SSL Certificates None 5 


MySQL information 


MySQL Hostname mysqlimaster.magento2cookbook.hypernode.io 
MySQL Port 3306 
MySQL Username app 
MySQL Password See documentation @ 











7. Next, we need to set up an SSH key to log in via SSH. By default, this is the only way 
to log in. Go to https: //service.byte.nl/sshkeymanager/ and submit your 
personal key or create a new pair. It will take less than 10 minutes to auto-submit this 
to your Hypernode. 


8. Now you can log in to the Hypernode via the shell. The hostname is the same as your 
domain name, which we had set up in the beginning. The username is always app. 
The example should look as follows: 


ssh app@yourdomain.hypernode.io 


9. If everything worked out fine, you should now have access to the Hypernode on 
http: //yourdomain.hypernode.io. 
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10. 


11. 


12. 


By default, the current Hypernode setup has a Magento 1 preinstalled setup. We will 
now switch to Magento 2 using the following commands via the shell: 


n98-magerun --root-dir=/data/web/public uninstall 
--installationFolder=/data/web/public -force 


touch ~/nginx/magento2.flag 
mkdir ~/magento2 


cd ~/magento2 


wget -qO- https://magento.mirror.hypernode.com/releases/magento2- 
latest.tar.gz | tar xfz - 


echo "create database magento2" | mysql 
chmod 755 bin/magento 


cat ~/.my.cnf 


bin/magento setup:install --db-host= [HOSTNAME] 

--dbname= [DATABASE] --db-user=app --db-password= [DATABASE _ 
PASSWORD] --admin-firstname= [YOURFIRSTNAME] --admin- 
lastname=[YOURSURNAME] --admin-user= [ADMINNAME] --admin- 
password= [ADMINPASSWORD] --adminemail= [YOUR@EMAIL.COM] --base- 
url= [YOUR.HYPERNODE.IO] --language=[en_ US] --timezone= [Europe/ 
Berlin] --currency= [EUR] --use-rewrites=1 


rm -rf ~/public 

mkdir ~/public 

cd ~/magento2 

ln -fs ../magento2/pub/* ../public 

The detailed instructions can also be found on the Hypernode knowledge base, 


https://support .hypernode.com/knowledgebase/installing-magento- 
2-on-hypernode/. This also includes a small tutorial regarding a sample data setup. 


Now open your browser and go to your domain name to check whether everything is 
working correctly. 


Congratulations, you just finished configuring Magento 2 on Hypernode. 
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Let's recap and find out what we did throughout this recipe. In steps 1 through 4, we create 
a new Hypernode account at https: //www.byte.n1/. These steps will create a new 
Byte customer that stores a reference to the Hypernode. The Hypernode is auto-created in 
the background on DigitalOcean. During the whole process, you will get multiple mails for 
validation and additional account information regarding the Hypernode logins. 





In steps 5 through 11, we need to switch from the default Magento 1 preinstalled setup to 
Magento 2. All setups are self-explanatory and result in a clean Magento 2 setup located 
on a managed hosting platform and ready for production. 


Hypernode provides you with a large set of tools useful for your Magento setup. Check your 
service panel for the latest tools and links available. Here is a small section of some useful links: 


https://yourdomain.hypernode.io/phpmyadmin/ 
https://support .hypernode.com/knowledgebase_category/getting-started/ 
https://support .hypernode.com/knowledgebase/configure-redis/ 


https://support .hypernode.com/knowledgebase/varnish-on-hypernode/ 


Managing Magento 2 on Docker 





Docker is a new way of packaging your application and building containers for every single 
process. It is very lightweight and easy to set up. Creating building blocks for Apache, NGINX, 
MySQL, PHP, HHVM, and Magento individually and running them together can save lots of 
time during development, testing, and production. 


In this recipe, we will not cover the Docker fundamentals but learn how to run a Magento 2 
Docker setup on your DigitalOcean Droplet using existing containers. 


Getting ready 


Before we can start using Magento 2 on Docker, we need to create a clean Droplet. Back up 
your current Droplet by creating a snapshot. Here are some easy steps to create a snapshot 
and start a new Droplet with Docker preinstalled: 


1. Power off your current Droplet in the DigitalOcean control panel. 
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2. Select Take Snapshot and choose a name. (This may take some time depending on 


how big your current environment is.) 








Take Snapshot 








Snapshots This may take more than an hour, depending on how much content is on your Droplet and how large the 
disk is 
3. Select Rebuild Droplet, which is in the Destroy menu, choose Ubuntu docker 


(1.9.1 on 14.04), and press Rebuild from Image. 


How to do it... 


For the purpose of this recipe, let's assume that we need to create a Magento 2 Docker setup. 
The following steps will guide you through this: 


1. 


Log in to your Docker Droplet. You can check your current Docker version with the 
following command: 


docker -version 

Before we start pulling the Magento 2 Docker container, we first need to pull a MySQL 
container. Run the following command in your shell: 

docker run -d --name mysql -p 3306:3306 -e MYSQL ROOT_ 
PASSWORD=admin mysql:5.6 


The Docker run command will automatically download a MySQL 5.6 container, which 
will run in the background once it's done. 


Now we can check whether the MySQL container works. Run the dockers images 
command, and then check which images are available. If you want to log in to the 
container, run the following command: 


docker exec -it mysql bash 


You can run any other command here, and then check whether MySQL is running. 
For example, run the ps --aux command and you will see the process of MySQL. 
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4. 





Now we start pulling the Magento 2 Docker container to our local machine. We 
are using a prebuilt Docker container hosted at the Docker hub (https ://hub. 
docker.com/u/raybogman/). 


Run the following command to install a clean Magento 2 setup: 
docker run --rm --name magento2 -it -p 80:80 --link mysql:mysql -e 


MYSQL USER=root -e MYSQL PASSWORD=admin -e PUBLIC _HOST=yourdomain. 
com raybogman/mage2cookbook-docker $* 


Run the following command to install a Magento 2 setup including sample data: 
docker run --rm --name magento2 -it -p 80:80 --link mysql:mysql -e 
MYSQL USER=root -e MYSQL PASSWORD=admin -e PUBLIC _HOST=yourdomain. 
com raybogman/mage2cookbook-sample-docker $* 


Change the PUBLIC_HOST setting with your own IP or domain name. The 
SampleData version has all of its assets to create a preinstalled Magento 2 setup. 


Be patient now; this may take some time. The latest Magento 2 container is 
downloaded and executed on the fly. The final phase is the execution of Apache 
that will run in the foreground. 


Now open your browser and, depending on your public IP or domain name, 
execute this. 


Now we can check whether the Magento 2 container works. Run the dockers 
images command, and then check which images are available. If you want to 
log in to the container, run the following command: 


docker exec -it magento2 bash 


You can run any other command here, and then check whether Apache 2 is running. 
For example, run the ps --aux command and you will see the process of Apache 2. 
All Magento 2 files are located at /var/www/magento2. 


Congratulations, you have Magento 2 running using a Docker container. The login 
credentials are the Magento username (admin), password (password123), and 
backend URL (http: //yourdomain.com/admin). 


Let's recap and find out what we did throughout this recipe. In steps 1 through 8, we create a 
Docker setup for Magento 2. 


In steps 2 and 3, we set up a MySQL container that will be downloaded automatically and run 
in the background. 
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In step 4, we download the prebuilt Magento 2 Docker container and connect it to the 
MySQL container. The installation process can take some time; Magento needs to deploy 
the whole setup. 


In step 7, you learn how to get shell access to the Magento container and maintain it. 


To kill/shut down the current Magento 2 container, use the Ctrl + C command in the 
running shell. 


This Magento 2 Docker container is designed only for demo purposes, and is there to run in 
the foreground and not as a daemon in the background. 


Check out the source code of the Magento 2 Docker container on GitHub: 
https://github.com/mage2cookbook. 


Some basic commands to use Docker are as follows: 




















docker ps Docker running containers 
docker images Docker local containers 

docker exec -it bash Access to running container shell 
docker rm -f $(docker ps -a -q) Remove all running containers 
docker rmi -f $(docker images -q) | Remove all containers 











Magento 2 
System Tools 


In this chapter, we will cover the basic tasks related to managing the system tools of 
Magento 2. You will learn the following recipes: 


> 


> 


> 


Installing Magento 2 sample data via GUI 

Installing Magento 2 sample data via the command line 
Managing Magento 2 indexes via the command line 
Managing Magento 2 cache via the command line 
Managing Magento 2 backup via the command line 
Managing Magento 2 set mode (MAGE_MODE) 


Transferring your Magento 1 database to Magento 2 


Introduction 


This chapter explains how to install and manage Magento 2 on a production-like environment. 
We will be installing a new Magento 2 instance via the shell command with and without 
sample data. Besides the setup, managing Magento 2 is different from the current Magento 
version. We will be using a lot of tools from the command line so basic shell knowledge is 
advised. The command-line tool in the /bin directory is similar to the current Swiss army 
knife tool in the current Magento version known as n98-magerun. 


Using bin/magento and Composer is one of the new key features in Magento 2 that will rock 
your world. 
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The recipes in this chapter will focus primarily on a more advanced setup of how to install 
Magento 2 and manage it. However, in some situations, we will dive in deeper related to 
the subject. 


Here is an overview of all the command-line tools in Magento 2: 


root@mage2cookbook: /var/www/html# bin/magento 


Magento CLI version 2.0.0 


Usage: 


command [options] [arguments] 


Options: 
--help (-h) Display this help message 
--quiet (-q) Do not output any message 


--verbose (-v|vv|vvv) Increase the verbosity of messages: 1 for normal 
output, 2 for more verbose output and 3 for debug 


--version (-V) Display this application version 
--ansi Force ANSI output 
--no-ansi Disable ANSI output 


--no-interaction (-n) Do not ask any interactive question 


The following commands are available in the command-line tools in Magento 2: 












































Commands Description 

help This displays help for a command 

list This lists the commands 

admin 

admin:user:create This creates an administrator 

admin:user:unlock This unlocks the administrator account 

cache 

cache:clean This cleans the cache type(s) 

cache:disable This disables the cache type(s) 

cache:enable This enables the cache type(s) 

cache:flush This flushes the cache storage used by the cache 
type(s) 

cache:status This checks the cache status 

catalog 

catalog: images:resize This creates resized product images 














Commands 


Description 





cron 





cron: run 


This runs jobs by schedule 





customer 





customer: hash:upgrade 


This upgrades the customer's hash according to the 
latest algorithm 











deploy 
deploy :mode:set This sets the application mode 
deploy :mode: show This displays the current application mode 





dev 





dev: source-theme: deploy 


This collects and publishes source files for a theme 





dev:tests:run 


This runs tests 





dev:urn-catalog:generate 


This generates the catalog of URNs to * .xsd 





dev: xml:convert 


This converts XML files using XSL style sheets 





i18n 





i18n:collect-phrases 


This discovers phrases in the code base 





i118n:pack 


This saves language packages 





i118n:uninstall 


indexer 


This uninstalls language packages 





indexer:info 


indexer : reindex 


indexer :set-mode 


This shows allowed indexers 
This reindexes data 
This sets the index mode type 





indexer : show-mode 


This shows the index mode 





indexer:status 


This shows the status of an indexer 





maintenance 

















maintenance:allow-ips This sets the maintenance mode exempt IPs 
maintenance:disable This disables the maintenance mode 
maintenance:enable This enables the maintenance mode 
maintenance:status This displays the maintenance mode status 
module 





module:disable 


This disables specified modules 





module:enable 


This enables specified modules 





module:status 


This displays the status of modules 





module:uninstall 


This uninstalls modules installed by Composer 





sampledata 











sampledata:deploy 





This deploys sample data modules 
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Commands 


Description 





S 


ampledata: remove 


This removes all sample data from composer. 
json 

















sampledata:reset This resets sample data modules for reinstallation 
theme 

theme:uninstall This uninstalls the theme 

info 

info:adminuri This displays the Magento Admin URI 





i 


nfo:backups:list 


This prints a list of available backup files 





i 


nfo:currency: list 


This displays the list of available currencies 





nfo:dependencies:show- 
ramework 


This shows the number of dependencies on the 
Magento framework 





5 


fo:dependencies :show- 


modules 


This shows the number of dependencies between 
modules 





nfo:dependencies :show- 


modules-circular 


This shows the number of circular dependencies 
between modules 





nfo:language:list 


This displays a list of available language locales 














info:timezone:list This displays a list of available time zones 
setup 
setup:backup This takes a backup of the Magento Application 


code base, media, and database 





S 


etup:config:set 


This creates or modifies the deployment 
configuration 





S 


etup:cron:run 


This runs a cron job scheduled for the setup 
application 





S 


etup:db-data:upgrade 


This installs and upgrades data in the DB 





S 


etup:db-schema: upgrade 


This installs and upgrades the DB schema 





S 


etup:db:status 


This checks whether the DB schema or data require 
an upgrade 





s 


etup:di:compile 


This generates the DI configuration and all non- 
existing interceptors and factories 





s 
t 


This generates all non-existing proxies and factories 
and precompiles class definitions, inheritance 
information, and plugin definitions 





S 


This installs the Magento application 





s 
£ 


etup:di:compile-multi- 
enant 

etup:install 
etup:performance:generate- 
ixtures 


This generates fixtures 





S 








etup:rollback 





This rolls back the Magento application code base, 
media, and database 
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Commands Description 

setup:static-content:deploy This deploys static view files 

setup:store-config:set This installs the store configuration 

setup:uninstall This uninstalls the Magento application 

setup:upgrade This upgrades the Magento application, DB data, 
and schema 














Throughout this chapter, you can pick your own preferred hosting setup as we set up in 
Chapter 1, Installing Magento 2 on Apache and NGINX. We will be using an NGINX-based 
setup. The Apache setup is pretty straightforward; when needed, we will address specified 
configuration settings when they occur. 





Installing Magento 2 sample data via GUI 


Installing Magento 2 via the graphical user interface (GUI) is not new. We have already done 
this in Chapter 1, Installing Magento 2 on Apache and NGINX. Now, we will be installing a new 
clean version including the sample data. 


The sample data can be installed during and at the end of the procedure. We will be using a 
composer. json file for our setup prerequisites. First, we will be installing a clean version 
with sample data, and later, | will show you how to install it at the end in case you already 
have a preinstalled version. 


Getting ready 


For this recipe, we will use a Droplet created in Chapter 1, Installing Magento 2 on Apache 
and NGINX, at DigitalOcean, https ://www.digitalocean.com/. We will be using NGINX, 
PHP-FPM, and a Composer-based setup. No other prerequisites are required. 


How to do it... 


For the first step, you can either create a new Droplet or rebuild a clean Droplet based on a 
Ubuntu or RedHat DigitalOcean image. 
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The option to rebuild is located in the DigitalOcean control panel in the Destroy menu and 
then rebuild Droplet: 





mage2cookbook.com 


Destroy Droplet 


This is irreversible. We will destroy your Droplet and all associated backups. 


Ea) Scrub Data 





Destroy 





Destroy 


Rebuild Droplet 


This will rebuild your Droplet using the original image you specified when you deployed. Please be advised 
that all data will be lost. 





Select an Image Rebuild from original 





Select an Image 
| FreeBSD 10.1 
FreeBSD 10.2 
Ubuntu 12.04.5 x32 
Ubuntu 12.04.5 x64 
Ubuntu 14.04 x32 
Ubuntu 14.04 x64 
Ubuntu 15.04 x32 
Ubuntu 15.04 x64 
Ubuntu 15.10 x32 
Ubuntu 15.10 x64 
Ubuntu 1504-mysql5.6-php7-hhvm3.10 
Fedora 21x64 
Fedora 22 x64 
Fedora 23 x64 
CentOS 5.10 x32 
CentOS 5.10 x64 
Debian 6.0 x32 
Debian 6.0 x64 
CentOS 6.7 x32 + 

















The steps to install Magento 2 sample data via GUI are as follows: 


1. 


Preferably, pick the new snapshot or the already created one and press Rebuild from 
Image. The rebuild will take around 60 seconds. 


Now log in to your new or current Droplet. We will be referring to a new build Droplet 
throughout this recipe. 
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Now let's download the latest Magento 2 version including sample data. Go to 
https://www.magentocommerce.com/download, pick Full Release with 
Sample Data (ZIP with sample data), and unpack this in your web directory. 
We refer to /var/www/html1 in this recipe. 


If you are using a ZIP package, make sure that you install the unzip package first, 
running the following command on the shell: 


apt-get install unzip 


Now let's set the ownership and permissions: 


chown -R www-data:www-data /var/www/html 


find . -type d -exec chmod 770 {} \; && find . -type f -exec chmod 
660 {} \; && chmod u+x bin/magento 


Now we use Composer to resolve all of our dependencies. Run the following 
command from the shell: 


cd /var/www/html/ && composer install 


During the installation process, you will get a notice to create a GitHub OAuth token. 
The download rate limit is pretty small. Copy the URL from your shell window in your 
browser, log in at GitHub or create an account, and create the token. You may also 
check Chapter 1, Installing Magento 2 on Apache and NGINX, for more details on 
this topic. 


Next, we will be using the setup wizard to continue the rest of the installation. In this 
chapter, we will be using the shell installation method. Go to your favorite browser 
and enter the following URL: 


http: //yourdomain.com/setup 


Continue your flow until Step 4: Customize Your Store. As we have chosen a 
Magento 2 package including sample data, all software modules are preinstalled 
and listed in the advanced modules configurations list. 
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Here is an overview of all the modules selected by Magento that can be managed 
during installation: 





Advanced Modules Configurations © 


v| Select All 


v! Magento_AdminNotification 
v| Magento_AdvancedPricingImportExport 


v| Magento_Authorizenet 


v| Magento_BundlelmportExport 


v Magento_BundleSampleData 


vi Magento_Cacheinvalidate 


v| Magento_Captcha 





117 out of 117 selected 
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7. Now, continue the rest of the steps and install Magento 2. Installing sample data can 
take some time, so don't close or refresh your browser. 


The progress bar and console log will share all details regarding the current status: 





Step 6: Install 


Installing... 87% 


Console Log + 


Module "Magento _ProductAlert': 


Module "Magento Weee': 
Installing data.. 


Module "Magento ProductVideo': 
Upgrading data.. 


Module 'Magento_CatalogSampleData': 
Installing data.. 


i 











Congratulations, you just finished the installation of Magento 2 including sample data. Now 
go to your browser using yourdomain.com; you will see the default Magento 2 layout theme 
called Luma, as follows: 








Å = Henks 
A Home Page x a => 
e @ D mage2cookbook.com Ser S 


© Luma Y 


What's New Women Men Gear Training Sale s) 


New Luma Yoga 
Collection 


Get fit and look 
fab in new 


seasonal styles 


Shop New Yoga 
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Let's recap and find out what we did throughout this recipe. In steps 1 through 6, we created 

a Magento 2 version including sample data. The process is almost the same as we did in the 
previous chapter. The most important change is that we downloaded a full version including 
sample data. In this build, Magento submitted all of the media files and data sample packages 
that we need to complete the process. During the graphical setup, we were able to choose 
which sample data packages are needed. This process could take some time to complete. 


In the /var directory, you can find the following hidden file with the current state of the 
installed sample data: 


less /var/www/html/var/.sample-data-state.flag 


Want to start all over again? Magento 2 has a magic uninstall option that cleans everything 
on the fly, cache, and database. You can use the php bin/magento setup:uninstall 
command on the shell, as shown here: 

root@mage2cookbook:/var/www/html# php bin/magento setup:uninstall 
Are you sure you want to uninstall Magento? [y/Nly 

Starting Magento uninstallation: 

Cache cleared successfully 

Cleaning up database “magento2~7 

File system cleanup: 

/var/www/html/pub/static/ requirejs 
/var/www/html/pub/static/adminhtml 
/var/www/html/pub/static/frontend 

/var/www/html/var/cache 

/var/www/html/var/composer_ home 

/var/www/html/var/di 

/var/www/html/var/generation 

/var/www/html/var/log 

/var/www/html/var/page cache 

/var/www/html/var/tmp 

/var/www/html/var/view_preprocessed 
/var/www/html/app/etc/config.php 

/var/www/html/app/etc/env.php 
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Installing Magento 2 sample data via the 


command line 





Installing Magento 2 via the shell is not new. In the current Magento version, it was already 
possible using the install.php file. The configuration looked like this: 


/usr/local/bin/php -£f install.php -- \ 
--license_ agreement _accepted "yes" \ 
--locale "en_US" \ 

--timezone "America/Los Angeles" \ 
--default_currency "USD" \ 

--db host "mysql.example.com" \ 

--db name "your_db name" \ 

--db_user "your_db_username" \ 

--db_pass "your _db password" \ 

--db prefix "" \ 

--admin_frontname "admin" \ 

--url "http://www.examplesite.com/store" \ 
--use_rewrites "yes" \ 

--use_secure "no" \ 

--secure_base_url "" \ 

--use_secure_ admin "no" \ 

--admin_ firstname "your _first_name" \ 
--admin_lastname "your_last_name" \ 
--admin_email "your_email@example.com" \ 
--admin_username "your_admin_username" \ 
--admin_password "your_admin_password" 


It was very easy to script and use multiple times on any given environment. 


In Magento 2, the logic stayed the same but now, it's much easier to use. We will be using a 
composer. json file for our setup prerequisites. 


Getting ready 


For this recipe, we will use a Droplet created in Chapter 1, Installing Magento 2 on Apache 
and NGINX, at DigitalOcean, https: //www.digitalocean.com/. We will be using NGINX, 
PHP-FPM, and a Composer-based setup. No other prerequisites are required. 
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How to do it... 


For the purpose of this recipe, let's assume that we need to create a Magento 2 hosting 
environment including sample data. The following steps will guide you through this: 


1. 


In this recipe, check your /root/.composer/auth. json file if you have a Magento 
of GitHub repository token, username, and password. If not, create them. Here is an 
example (the username and password are dummies): 


{ 


"http-basic": { 


"repo.magento.com": { 
"username": "256e8f49b66689ecf18b07bc3cc2ca2d", 
"password": "cbhlc7ef2e14b666d8a4e99fe40c8393a" 


} 
}, 
"github-oauth": { 
"github.com": "e960£7000803e2832ce5£7a637d58a666" 


} 


You can create a Magento authentication key in the user section of the Magento 
connect portal. Go to http: //www.magentocommerce.com/magento- 
connect /, navigate to the Developers | Secure Keys menu item, and create one. 
Public Key is your username and Private Key is your password. 


The GitHub token can be created under the tokens section of your GitHub account. 
Go to https: //github.com/settings/tokens and press Generate new token. 
Copy the token in your auth. json file of your home or root directory. 


Now, let's create a Composer project using the shell. Go to your web server 
/var/www/html directory and use the following command: 
composer create-project "magento/project-community-edition" /var/ 


www/html --prefer-dist --repository-url https://repo.magento.com/ 


Now use the following command on the shell. This will add the sample data package 
to the Magento composer. json file. 


php bin/magento sampledata:deploy 


You may get the following error notice; ignore this once you set up the auth. json 
file: 
[Composer\Downloader\TransportException] 


The 'https://repo.magento.com/packages.json' URL required 
authentication. 


You must be using the interactive console to authenticate 
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4. Run the following command on the shell. This will download all sample data to your 
Magento 2 environment. 


composer update 


5. Make sure that you have the correct file permission before you continue: 


chown -R www-data:www-data /var/www/html 


The easy way to continue is to visit our setup page from the browser as we did 
in the Installing Magento 2 sample data via GUI recipe of this chapter using the 
http: //yourdomain.com/setup URL. 


6. Wecan also use the shell to finish the setup using the following script: 


bin/magento setup:install \ 
--db-host=localhost \ 
--db-name=<your-db-name> \ 
--db-user="<db-user>" \ 
--db-password="<db-password>" \ 
--backend-frontname=<admin-path> \ 
--base-url=http://yourdomain.com/ \ 
--admin-lastname=<your-lastname> \ 
--admin-firstname=<your-firstname> \ 
--admin-email=<your-email> \ 
--admin-user=<your-admin-user> \ 
--admin-password=<your-password> \ 


al Always make sure that bin/magento has the correct permissions to 
execute: 


chmod 755 bin/magento 


Congratulations, you just finished the installation of Magento 2 including sample data. Now 
go to your browser using yourdomain.com, and you will see the default Magento 2 layout 
theme called Luma. 


Let's recap and find out what we did throughout this recipe. In steps 1 through 6, we installed 
Magento 2 via the command shell. Before we could continue, we needed to create an auth. 
json file that stores our Magento and GitHub tokens. Without them, we may not be able to 
install the software easily due to download restrictions or dependencies. 
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In step 2, we used one line of code to trigger the whole download process of Magento 2. 
Depending on whether this is your first call, the process can take some time. Once you install 
Magento for the second time, the process installs much faster because of the locally stored 
cache files. 


In step 3, we used bin/magento to update the composer. json file including the sample 
data packages. Then we needed to update Composer before we could install Magento 2 from 
the shell; otherwise, the sample data would not be included. 


In step 6, we used the bin/magento setup:install parameter to commit all of the 
database, URL admin path, domain name, and user credentials to the setup of Magento 2. 


Always make sure that your system PATH is exported to your system using the following 
command from the shell (where /var/www/html1 is your Magento root folder): 


export PATH=S$PATH:/var/www/html/bin 
More information on environmental variables can be found here: 


https://www.digitalocean.com/community/tutorials/how-to-read-and-set- 
environmental-and-shell-variables-on-a-linux-vps 


Managing Magento 2 indexes via the 


command line 





In the current version of Magento, using indexes is one of the most important key features. 
Without the correct indexes, we will not be able to use Magento properly. 


What do the indexes do, and why are they so important? One of the key elements is to make 
things run faster. Without indexing, Magento 2 would have to calculate data on the fly. In 
Magento 2, we will be using the following nine indexes: 


>» Customer Grid: This indexer rebuilds the customer's grid. This is a new indexer in 
Magento 2 for optimized rendering of the adminhtml backend pages. 


» Category Products: This indexer creates the association between categories and 
products based on the associations that you set in the backend on the categories 
and relates to the Product Categories indexer. The flat catalog indexer creates a flat 
optimized table in the database. 


>» Product Categories: This indexer creates the association between products and 
categories based on the associations that you set in the backend on the products 
and relates to the Category Products indexer. The flat product indexer creates a flat 
optimized table in the database. 
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Product Price: This indexer relates to the products and their advanced pricing 
options based on, for example, customer group, website, and catalog discount rules. 
The indexer aggregates the data in tables (catalog product_index price *) 
and makes the selects (sorting and filtering) much easier. 


Product EAV: This indexer reorganizes the Entity Attribute Value (EAV) product 
structure to the flat structure. The product EAV indexer is related to the Category 
Products and Product Categories indexer and creates a flat optimized table in the 
database. 





Stock: This indexer rebuilds and calculates the current stock data. 
Catalog Search: This indexer rebuilds the catalog product fulltext search. 


Catalog Rule Product: This indexer creates and updates the created catalog price 
rule set. 


Catalog Product Rule: This indexer creates and updates the created shopping cart 
price rule set. 


The database table looks as follows: 

































































= = = += + + 

| state_id | indexer_id | status | 

preme.. $33 e e SS SS SS ae ae ae e ae ae ae ae ae ae ae ae e e e þe 

| 1 | customer_grid | valid | 

| 2 | catalog_category_product | invalid | 

| 3 | catalog_product_category | invalid | 

| 4 | catalog_product_price | valid | 

| 5 | catalog_product_attribute | valid | 

| 6 | cataloginventory_stock | valid | 

| 7 | catalogsearch_fulltext | valid | 

| 8 | catalogrule_rule | invalid | 

| 9 | catalogrule_product | valid | 

4+---------- 4+--------------------------- +--------- + | 

The control panel of the backend looks like this: 
WM indexer Description Mode Status Updated 

Customer Grid Rebuild Customer grid index UPDATE ON SAVE Nov 23, 2015, 9:18:31 PM 
Category Products Indexed category/products association UPDATE ON SAVE REINDEX REQUIRED Nov 23, 2015, 9:19:05 PM 
Product Categories Indexed product/categories association UPDATE ON SAVE REINDEX REQUIRED Nov 23, 2015, 9:19:05 PM 
Product Price Index product prices UPDATE ON SAVE READY | Nov 23, 2015, 9:18:33 PM 
Product EAV Index product EAV UPDATE ON SAVE [ READY | | Nov 23, 2015, 9:18:34 PM 
Stock Index stock UPDATE ON SAVE READY | Nov 23, 2015, 9:18:34 PM 
Catalog Search Rebuild Catalog product fulltext search index [UPDATE ON SAVE [ READY ] | Nov 23, 2015, 9:18:37 PM 
Catalog Rule Product Indexed rule/product association UPDATE ON SAVE REINDEX REQUIRED Nov 23, 2015, 9:19:14 PM 
Catalog Product Rule Indexed product/rule association UPDATE ON SAVE [ READY Nov 23, 2015, 9:18:37 PM 
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Getting ready 


For this recipe, we will use a Droplet created in Chapter 1, Installing Magento 2 on Apache 
and NGINX, at DigitalOcean, https ://www.digitalocean.com/.We will be using NGINX, 
PHP-FPM, and a Composer-based setup. A working Magento 2 setup is required. 


How to do it... 


The following are the steps to implement the recipe: 


T. 


In Magento 2, we only have the option to change the Update on Save or Update by 
Schedule state: 


Update on Save: Index tables are updated immediately after the dictionary data 
is changed 


Update by Schedule: Index tables are updated by cron job according to the 
configured schedule 

We will be using the shell during this. This will be the only way to update your indexes. 
Go to your shell and run the following command from your web server directory: 

php bin/magento indexer:info 

We now get an overview of all the indexers. 

Now run php bin/magento indexer: status; this will give us an up-to-date 
status of the current indexes. 


Now run php bin/magento indexer: show-mode; this information is related to 
the Update on Save or Update by Schedule modes. 


We can switch the modes using the following command on the shell: 

php bin/magento indexer:info realtime customer grid 

Using the mode option realtime (Update on Save) or schedule (Update by Schedule) 
may set the indexer. 

One of the most commonly used commands is as follows: 

php bin/magento indexer: reindex 

This will reindex all the indexers. However, you can also reindex them individually 
using the following command: 


php bin/magento indexer:reindex customer grid 
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We can also use the following command: 


php bin/magento indexer:reindex customer grid catalog category __ 
product etc... 


7. Now you can rerun indexer: status to check whether all the indexers are up to date. 


Let's recap and find out what we did throughout this recipe. In steps 1 through 7, you learned 
how to use the bin/magento indexer. 


In step 5, you learned how to check what the current status is of all the indexes. In step 4, 
we saw how to switch from the realtime Update on Save to the schedule Update on Schedule 
modes. 


In step 6, you learned how to reindex them individually. 


You can also check the current status of the indexer using MySQL. Run the following 
command in the shell: 


mysql -u <username> --database <dbname> -p -e "select * from indexer __ 
state" 


Managing Magento 2 cache via the 


command line 





Cache management is one of the new optimized key features in Magento 2. We will be using 
the following cache types: 





Cache types Cache type code name Description 


Configuration config Magento collects configuration 
from all modules, merges it, and 
saves the merged result to the 
cache. This cache also contains 
store-specific settings stored in the 
filesystem and database. 





Clean or flush this cache type after 
modifying configuration files. 
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Cache types 





Cache type code name 


Description 





Layout 


layout 


This is the compiled page layout 
(that is, the layout components 
from all components). 


Clean or flush this cache type after 
modifying layout files. 





Block HTML output 


block_html 


This is the HTML page fragments 
per block. 


Clean or flush this cache type after 
modifying the view layer. 





Collections data 


collections 


This is the result of database 
queries. 


If necessary, Magento cleans up 
this cache automatically, but third- 
party developers can put any data 
in any segment of the cache. 


Clean or flush this cache type if 
your custom module uses logic 
that results in cache entries that 
Magento cannot clean. 





DDL 


db ddl 


This is the database schema. 


If necessary, Magento cleans up 
this cache automatically, but third- 
party developers can put any data 
in any segment of the cache. 


Clean or flush this cache type after 
you make custom changes to the 
database schema (in other words, 
updates that Magento does not 
make itself). 


One way to update the database 
schema automatically is using 
the magento setup:db- 
schema: upgrade command. 





EAV 








eav 





This is metadata related to EAV 
attributes (for example, store 
labels, links to related PHP code, 
attribute rendering, search settings, 
and so on). 


You should not typically need to 
clean or flush this cache type. 
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Cache types 


Cache type code name 


Description 





Page cache 


full page 


This is the generated HTML pages. 


If necessary, Magento cleans up 
this cache automatically, but third- 
party developers can put any data 
in any segment of the cache. 


Clean or flush this cache type after 
modifying code level that affects 
HTML output. It's recommended 

to keep this cache enabled 
because caching HTML improves 
performance significantly. 





Reflection 


reflection 


This removes a dependency 
between the web API module and 
the Customer module. 





Translations 


translate 


This is the merged translations 
from all modules. 








Integration config integration This is the compiled integrations. 
configuration Clean or flush this cache after 

changing or adding integrations. 
Integration API config integration_ This is the compiled integration 
configuration api APIs. 





Web services 
configuration 








config webservice 





This is the web API structure. 


By default, we will be using Full Page Cache now in the community version, which is a great 
improvement next to the web services (API) caches. 


Depending on the current development, default, and production state, caches will be 


different. 


In the next recipes of this chapter, we will dive deeper into the use of different states. 


Getting ready 


When cleaning or flushing your cache, Magento will flush its content from either the var/ 
cache or var/full_page directory. In this recipe, we will refer to the bin/magento 





cache:enable, bin/magento cache:disable, bin/magento cache:clean, or bin/ 
magento cache: flush options. 
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How to do it... 


For the purpose of this recipe, let's assume that we need to manage the Magento 2 cache 
setup. The following steps will guide you through this: 


1. Let's first check the current status using the following command: 


php bin/magento cache:status 
The output looks like this: 


8P camy 


|root@mage2cookbook: /var/www/html# php bin/magento cache:status aj 
|Current status: 











config: 1 

layout: 1 

block html: 1 
collections: 1 
reflection: 1 

db ddl: i 

eav: 1 

config integration: 1 
config integration_api: 1 
full_page: 1 
translate: 1 

1 
= 


m 


config_webservice: 
root@mage2cookbook: /var/www/html i 




















2. Now we will check how to enable and disable caches individually or all at once. Use 
the following command to disable the caches individually: 


php bin/magento cache:disable config 
This will disable the cache for only config. You may pick any cache type code name. 
To enable the config cache back, use the following command: 


php bin/magento cache:enable config 
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When skipping the cache type code name behind the command, we will be able to 
enable or disable the caches all at once. It will look like this wnen we disable the cache: 









root@mage2cookbook: /var/www/html# 
Changed cache status: 


php bin/magento cache:disable 
















config: -> 
layout: -> 
block html: -> 
collections: -> 
reflection: -> 
db ddl: -> 


config_integration: 
config_integration_api: 
full_page: 

translate: 

config_webservice: 
root@mage2cookbook: /var/www/html | 


oooooo0co0coc c0 00 


1 
1 
1 
1 
2 
x 
eav: 1 -> 
1 
1 
1 
1 
1 
$ 


3. When we want to re-enable all caches, we use php bin/magento cache:enable. 
As you can see now, after enabling the caches, they are cleaned as well: 


P = carn 














root@mage2cookbook:/var/www/html# php bin/magento cache:enable a 
Changed cache status: 

config: 0 -> 1 

layout: 0 -> 1 

block_html: 0 -> 1 

collections: 0 -> 1 

reflection: 0 -> 1 

db ddl: 0 -> 1 

eav: 0 -> 1 

config_integration: 0 -> 1 
config_integration api: 0 -> 1 E 

full_page: 0 -> 1 

translate: 0 -> 1 

config_webservice: 0 -> 1 


Cleaned cache types: 


collections 

reflection 

db ddl 

eav 

config_integration 
config_integration api 

full_page 

translate 

config_webservice 
root@mage2cookbook: /var/www/html# i 








4| 
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4. Now let's clean the caches individually using php bin/magento cache:clean 
config. By removing the cache type code name, we will be able to clean all of them 
at once. 


5. Now let's flush the caches individually using php bin/magento cache:flush 
config. By removing the cache type code name, we will be able to clean all of them 
at once. 


Cleaning a cache type deletes all items from enabled Magento cache 
types only. In other words, this option does not affect other processes 
al or applications because it cleans only the cache that Magento uses. 


= 
Q Disabled cache types are not cleaned. 


Flushing a cache type purges the cache storage (such as Redis, 
Memcache, and so on), which might affect other process' applications 
that are using the same storage. 


Let's recap and find out what we did throughout this recipe. In steps 1 through 5, you learned 
how to manage the cache in Magento 2. 


In step 1, you learned how to use the status option to check what the current cache status 
is. In step 2, we were able to enable or disable the caches individually. 


In steps 4 and 5, you learned how to flush and clean the caches individually. 


You can also flush all cached items running the following command from the shell: 
php bin/magento cache:flush -all 


Keep in mind that cleaning or flushing your Full Page Cache can resolve in a cold (no-cache) 
page, so warming up all pages is advised. 


Managing Magento 2 backup via the 


command line 





Every production environment needs a proper backup plan. By default, Magento 2 has a 
complete set of options to create and roll back backups. 
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When creating a backup, we can use one of the following options: 




















Option Meaning Backup file name 

--code This creates a backup from the var/backups/<timestamp>_ 
filesystem (excluding /var and / filesystem.tgz 
pub/static 

--media This creates a backup from the / var/backups/<timestamp>_ 
media directory filesystem _media.tgz 

-db This creates a backup from the var/backups/<timestamp>_ 
current database db.gz 











an alternative backup solution connected to a backup storage. 


Getting ready 


When creating a backup, Magento will store it in the var/backups directory. In this recipe, 
we will refer to the bin/magento setup:backup and bin/magento setup:rollback 
options. 


I 
[ Q Besides the Magento backup options, it is always advisable to use | 


How to do it... 


For the purpose of this recipe, let's assume that we need to manage the Magento 2 backup 
setup. The following steps will guide you through this: 


1. Let's start creating a code-only backup using the following command: 
php bin/magento setup:backup --code 


Once Magento sets the maintenance code flag, the web shop is offline for everybody. 
Creating a code backup takes some time. The backup will be stored in var/ 
backups. A clean Magento 2 code backup is around 123 MB. 


2. Now we will create a database-only backup using the following command: 
php bin/magento setup:backup --db 


Aclean Magento 2 database backup is around 14 MB. 


3. Fora media backup, we use the following command: 
php bin/magento setup:backup --media 


Aclean Magento 2 media backup with sample data is around 153 MB. 
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4. 





Now let's check what backups have been created, using the following command: 
php bin/magento info:backup:list 


This will give us an overview of what's available: 


Showing backup files in /var/www/html/var/backups. 


+--------------------------------- +------------- + 
| Backup Filename | Backup Type | 
+--------------------------------- +------------- + 
| 1448480907_filesystem _code.tgz | code | 

| 1448481232_db.gz | db | 


| 1448481295_filesystem media.tgz | media | 


Rolling back a backup is very easy. You can use the following command on the shell: 
php bin/magento setup:rollback [-c|--code-file="<name>"] [-m]|-- 
media-file="<name>"] [-d|--db-file="<name>"] 

For example, to restore a database backup, we can use the following command: 
php bin/magento setup:rollback -d 1448481232 db.gz 


You will get the following notification to confirm your action: 


You are about to remove current code and/or database tables. Are 
you sure? [y/N] 


While confirming the action, you could get a Segmentation fault. You 
ul can fix this using the following command. This could be related to PHP 7. 
Q Always use the latest version: 


ulimit -s 65536 


You can also store this in the . bashrc file on your system. 


Congratulations, you just rolled back a backup. Pick any type to do the same. Always 
flush and clean your cache once you are done. 


Setting up a scheduled backup schema is a whole different ball game. We first need 
to set up a cron job using the following command: 


crontab -e 


*/1 * * * * php /var/www/html/bin/magento cron:run 


This command will create a cron schedule in the Magento 2 database. 
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8. Creating a daily, weekly, or monthly backup can be done in the administrator 
backend. Log in and navigate to Stores | Configuration | Advanced | System | 
Scheduled Backup Settings: 





Scheduled Backup Settings 


ADVANCED A 
PEAT Enable Scheduled Backup | Yes v 
Backup Type | Database v 
System p lye 
Start Time | 00 ¥ |:| 00 ¥ |:| 00 v 
Advanced 
Frequency | Daily ’ 
Developer 
Maintenance Mode | Yes - 





Please put your store into maintenance mode 
during backup. 











Let's recap and find out what we did throughout this recipe. In steps 1 through 8, you learned 
how to create rollbacks and manage backups via the command line. 


In step 1, we created a backup for our code base only. In step 2, we created a backup for the 
database and in step 3, for all the media files. 


In step 4, we listed all the created backups that are located in var/backups. 


The process in step 5 is related to the rollback scenario. Depending on the backup size, rolling 
back could take some time. 


In steps 7 and 8, we configured a cron job to schedule our daily backup process automatically. 


You can also check the current status of the cron schedule using MySQL. Run the following 
command from the shell: 


mysql -u <username> --database <dbname> -p -e "select * from cron_ 
schedule" 
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Managing Magento 2 set mode 


(MAGE_MODE) 





Magento 2 comes with a new feature set called MAGE_MODE. This option gives you the 
configuration to run Magento in either developer, default, or production mode. 


This feature is very important during development and product phases. It gives a developer 
the tool to debug or created optimized caches for high performance needs. 


By default, the default mode is set. 


The following table describes the modes in which we can run Magento: 








Mode name Description 
default When no given mode is given, this is explicitly set and has the following 
benefits: 


e Static view file caching is enabled 

e Enables automatic code compilation (code optimization) 
e Exceptions are written to the log files. 

e Hides the custom X-Magento-* HTTP response header 





developer It has the following benefits: 

e Disables static view file caching 

e Enables automatic code compilation (code optimization) 
e Shows the custom X-Magento-* HTTP response header 
e = Verbose logging 


e Slowest performance state 





production It has the following benefits: 

e Optimized caches available 

e Exceptions are written to the log files. 
e Static files are not cached 














A When using a Development Test Acceptance Production (DTAP) 
Q environment, it is important to run your DTA in development mode 
and production on P. 
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Getting ready 


Always check what web server you are using; the settings for Apache and NGINX are not the 
same. In this recipe, we will be showing you how to set this on both of them. 


How to do it... 


For the purpose of this recipe, let's assume that we need to manage the Magento 2 
production or development setup. The following steps will guide you through this: 


1. 


In this recipe, the setup of the MAGE_SET option is different for NGINX and Apache. In 
Apache, we can use either the . htaccess file or configure this in the vhost file. We will 
first look into the Apache setup. While all recipes of this chapter are based on NGINX, 

it's best to skip this part and continue to the next listed topic or retrieve an DigitalOcean 
Droplet that we had set up in Chapter 1, Installing Magento 2 on Apache and NGINX. 


Go to the .htaccess file in your web root directory and remove the # (hash or pound 
sign) at the fifth line from the top: 


SetEnv MAGE MODE developer 


Change it to the following: 
SetEnv MAGE MODE production 


If you are using a server-based configuration instead of the . htaccess file, use the 
following then: 


SetEnv MAGE MODE "developer" 


The following code is for the current 000-default.conf: 


<VirtualHost *:80> 

ServerAdmin webmaster@localhost 
DocumentRoot /var/www/html 
SetEnv MAGE MODE "developer" 
<Directory /var/www/html> 
Options Indexes FollowSymLinks 
AllowOverride All 

Order allow,deny 

allow from all 

</Directory> 


ErrorLog ${APACHE LOG DIR}/error.log 
CustomLog ${APACHE LOG DIR}/access.log combined 


ProxyPassMatch */(.*\.php(/.*)?)S fegi://127.0.0.1:9000/var/www/ 
htm1/$1 
</VirtualHost> 


Now continue to step 3. 
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2. 





Now let's do the setup for NGINX. Go to your vhost file. If you are using the NGINX 
setup from Chapter 1, Installing Magento 2 on Apache and NGINX, you will find it in 
/etc/nginx/conf.d/default.conf 


Open the default .conf file and go to the following rule: 
set SMAGE MODE developer; 


Change this to the following: 
set SMAGE MODE production; 


Restart your NGINX server now using the following command: 


service nginx restart 


Check the current status in Magento using the following command: 


php bin/magento deploy:mode: show 


By default, it shows the default status. We now switch the status using the following: 


php bin/magento deploy:mode:set production 


We can also use the following command: 
php bin/magento deploy:mode:set developer 


This will trigger the maintenance mode and start creating all necessary optimized 
static files needed. 


We can also run this manually. However, first we will need to create static files in the 
pub/static directory. Run the following command on the shell: 

php bin/magento setup:static-content:deploy 

If you want to skip the code compilation, use the --skip-compilation option, as 
shown in the following command: 


php bin/magento deploy:mode:set developer --skip-compilation 
Remember to check your permissions and ownership of the newly created files. 
sl Code compilation consists of caches, optimized code, optimized 


Q dependency injection, proxies, and so on. Magento 2 needs these 
files to serve an optimized code base to the client's browser. 


Let's recap and find out what we did throughout this recipe. In steps 1 through 6, you learned 
configuring the development and production modes in Magento 2. 
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In step 1, we configured the SetEnv parameter in the . htaccess file of Apache to set the 
correct mode. There is also an option to configure this in the Apache configuration file instead. 


In step 2, we configured the set S$MAGE MODE parameter in NGINX to use the correct mode. 


In step 3, we used the bin/magento deploy option to tell Magento to start using the 
selected mode in NGINX or Apache, and create additional static files when running in 
production mode or show the correct debug headers in the developer mode. 


In step 4, you learned how to deploy static content in the pub/static directory when running 
in production mode. This option will trigger the whole process of merging and compiling the 
correct code in the public folder. 


Use curl to check your HTTP response header to see what current state you are running, 
as shown in the following: 


curl -I http://mage2cookbook.com/ 


HTTP/1.1 200 OK 

Server: nginx/1.9.6 

X-Magento-Cache-Debug: HIT 

Always check the current status in your HTTP header and Magento shell. Only setting the 


web server configuration will not automatically trigger the Magento configuration and can 
mislead you. 


Transferring your Magento 1 database to 


Magento 2 





Moving your Magento 1 to Magento 2 may be one of the most challenging things out there. 
Luckily, Magento supported us with a database migration option. 


The Magento 2 Data Migration Tool is here to help you convert your products, customers, 
order/sales data, store configuration, promotions/sales rules, and more to move to a clean 
Magento 2 setup. 


Custom code, Extensions, and Themes are out of the current scope of the Data Migration Tool. 


The currently supported migrations are the Community Edition (CE) versions 1.6.x, 1.7.x, 
1.8.x, and 1.9.x and Enterprise Edition (EE) versions 1.11.x, 1.12.x, 1.14.x, and 1.14.x. 
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I 
>< Check with your third-party extension developer for a Data Migration 
Tool to move the database code base to Magento 2. 


Getting ready 


Before we can start migrating our system, we need to check the following: 


> 


Have a clean Magento 2 system running as we set up in Chapter 1, Installing 
Magento 2 on Apache and NGINX. 


Disable your cron jobs. 
Always back up your databases and old and new Magento versions. 


Check whether there is a network connection from the current Magento 1 to 
Magento 2 server. Check the firewall for database access if needed (port 3306). 


Only use the exact version number, so that the data-migration-tool 2.0.0 corresponds 
with Magento 2.0.0. 


1 
~ You may copy your current production database to the 
new Magento 2 server and run it there. 


A migration of Magento 1 to Magento 2 has the following five phases that are important to 
follow in the correct order: 


1. 


Settings: Migration of the settings is step 1. This will transfer all information from the 
stores, website, and system configuration. 


The command is php bin/magento migrate:settings. 

Data: Migration of the data is step 2. This will transfer all categories, products, 
customers, orders, wishlists, ratings, and so on 

The command is php bin/magento migrate:data. 

Delta: Migration of the delta is step 3. This is an important step and is used to 
transfer Magento 1 data to Magento 2 where new updates occur. It will update the 


most recent data of customers, orders, or other customer-related data. It is common 
to use this command before going live. 


The command is php bin/magento migrate:delta. 


Media: Migration of the media files is easy; just copy all files from /media to 
/pub/media. 
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Custom modules/themes: Migration of your modules or themes is out of the scope 
of the migration tool. Contact your solutions provider to check whether they have 

a new version available. This also applies to any custom-made themes of theme 
packages bought online. 


How to do it... 


For the purpose of this recipe, let's assume that we need to manage a Magento 1 to 
Magento 2 migration setup. The following steps will guide you through this: 


1. 


First, we need to run the following command to add data-migration-tool to your 
current Composer setup: 


composer config repositories.data-migration-tool git https:// 
github.com/magento/data-migration-tool-ce 


composer require magento/data-migration-tool:dev-master 
Wait while all dependencies are updated. 


Now check whether the migration tools are available in the bin/magento shell tool: 














Commands Description 

migrate 

migrate:data Main migration of data 

migrate:delta Migration of the data that is added to Magento after 


the main migration 








migrate:settings Migration of the system configuration 





For this recipe, we will be using a Magento 1 database installation on our 
DigitalOcean Droplet. You may pick any of your production or Magento 1 sample 
data SQL dumps. We will be using a Magento 1.9.2.2 sample data SQL dump. Our 
database is called magento. 


Now, we need to map the database configuration files from the Magento 1 database 
to the Magento 2 database. Always make sure that you are using a clean database; 
otherwise, you can run the following command: 


php bin/magento setup:uninstall 

Go to /var/www/html/vendor/magento/data-migration-tool/etc/ce- 
to-ce and pick the correct database version mentioned in the directory. If correct, 
you will see two files called config.xml.dist and map.xml.dist. 

Copy config.xml.dist to config.xml using the cp command: 


cp config.xml.dist config.xml 
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6. 





Open your config .xm1 and look for the <source> tag (line 94). Change it 
accurately with the database username and password: 


<SOurce> 


<database host="localhost" name="magentol" user="root" 
password="mypassword"/> 


</source> 
<destination> 


<database host="localhost" name="magento2" user="root" 
password="mypassword"/> 


</destination> 
<options> 
<source prefix>myprefix-from-magentol</source prefix> 
<crypt_key>mycrypt-key-from-magentol</crypt_key> 
</options> 


If you are using a custom prefix in your database or you wish to use your encryption 
key on your Magento 2 setup, you can add this to the <options> section, as shown 
in the previous code. 


Now we can start step 1 of the settings migration using the following command: 
php bin/magento migrate:settings /var/www/magento2/vendor/magento/ 


data-migration-tool/etc/ce-to-ce/1.9.2.2/config.xml 


As you can see, here we are using the 1.9.2.2 version. Depending on your version, 
you may change this before running the command. 


The output result looks like this: 


[2015-12-02 20:28:56] [INFO] [mode: settings] [stage: integrity 
check] [step: Settings Step]: started 


100% [=======2=22222222222222] Remaining Time: 1 sec 


[2015-12-02 20:28:56] [INFO] [mode: settings] [stage: integrity 
check] [step: Stores Step]: started 


100% [==========2222222222222]] Remaining Time: 1 sec 


[2015-12-02 20:28:56] [INFO] [mode: settings] [stage: data migration] 
[step: Settings Step]: started 


100% [=========2222222222222] Remaining Time: 1 sec 


[2015-12-02 20:28:59] [INFO] [mode: settings] [stage: data migration] 
[step: Stores Step]: started 


100% [=========2222222222222] Remaining Time: 1 sec 


[2015-12-02 20:28:59] [INFO] [mode: settings] [stage: volume check] 
[step: Stores Step]: started 


100% [==========2=2222222222222] Remaining Time: 1 sec 


[2015-12-02 20:28:59] [INFO] [mode: settings] [stage: volume check] 
[step: Stores Step]: Migration completed 











are available. If so, you can continue. 


command: 


You can check your Magento 2 system configuration backend if all updated settings 


php bin/magento migrate:data /var/www/magento2/vendor/magento/ 
data-migration-tool/etc/ce-to-ce/1.9.2.2/config.xml 


The output result looks like this: 
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If step 1 is correct, we continue to migrate our data to Magento 2 using the following 





|[2015-12-03 19: 
100% 


06: 


28] [INFO][mode: data] [stage: 





[2015-12-03 19: 
100% 





] Remaining 


06:29] [INFO] [mode: data] [stage: 





J] Remaining 





[2015-12-03 19 
100% [ 


106: 


29] [INFO] [mode: data] [stage: 





[2015-12-03 
100% [ 


] Remaining 


:33] [INFO] [mode: data] [stage: 


] Remaining 





[2015-12-03 
100% 


:33] [INFO] [mode: data] [stage: 





133] [INFO] [mode: 


[2015-12-03 
100% 


] Remaining 





] Remaining 





[2015-12-03 
100% [ 


:33] [INFO] [mode: 





[2015-12-03 
100% [ 


133] [INFO] [mode: 


] Remaining 


] Remaining 





[2015-12-03 
100% 


133] [INFO] [mode: 





[ 
[2015-12-03 
100% 


133] [INFO] [mode : 


] Remaining 





J] Remaining 





[2015-12-03 


133] [INFO] [mode : 





100% [ 

















[2015-12-03 
100% [ 
[2015-12-03 
100% 


136] [INFO] [mode : 
137] [INFO] [mode : 


] Remaining 


] Remaining 






































[ = ] Remaining 
[2015-12-03 19:06:37] [INFO][mode: data] [stage: 
100% [========= J] Remaining 
[2015-12-03 19:06:37] [INFO][mode: data] [stage: 
100% =] Remaining 
[2015-12-03 19:06:37] [INFO] [mode: data] [stage: 
100% [ ] Remaining 

19:06:46] [INFO] [mode: data] [stage: 


[2015-12-03 
00% 

















=] Remaining 


19:06:46] [INFO] [mode: data] [stage: 





:46] [INFO] [mode: data] [stage: 


00% 
[2015-12-03 
100% 





J] Remaining 








[2015-12-03 
100% [ 





:46] [INFO] [mode: 





] Remaining 





[2015-12-03 
100% [ 


146] [INFO] [mode: 


] Remaining 











] Remaining 





:46] [INFO] [mode: 





[2015-12-03 
100% 


[2015-12-03 
100% [ 


:46] [INFO] [mode: 


] Remaining 





] Remaining 





[2015-12-03 


:46] [INFO] [mode: 





100% [= 
[2015-12-03 
100% [ 


=] Remaining 


:46] [INFO] [mode: data] [stage: 


=] Remaining 





:46] [INFO] [mode: 





[2015-12-03 
100% 


147] [INFO] [mode: 


] Remaining 


00% [=sssasssssessssesses=es=====] Remaining 





:47] [INFO] [mode: 





[2015-12-03 
100% 


[2015-12-03 
100% [ 


147] [INFO] [mode: 


] Remaining 


] Remaining 





[2015-12-03 


:47] [INFO] [mode: 





100% 





] Remaining 





:47] [INFO] [mode: data] [stage: 





C 
[2015-12-03 19: 
100% 
[2015-12-03 19: 


J] Remaining 


2:47] [INFO] [mode: data] [stage: 


data] [stage: 
data] [stage: 
data] [stage: 
data] [stage: 
data] [stage: 
data] [stage: 
data] [stage: 


data] [stage: 


data] [stage: 
data] [stage: 
data] [stage: 
data] [stage: 


data] (stage: 


data] [stage: 
data] [stage: 
data] [stage: 
data] [stage: 


data] [stage: 


integrity check] [step: 
Time: 1 sec 

integrity check] [step: 
Time: 1 sec 

integrity check] [step: 
Time: 1 sec 

integrity check] [step: 
Time: 1 sec 

integrity check] [step: 
Time: 1 sec 

integrity check] [step: 
Time: 1 sec 

integrity check] [step: 
Time: 1 sec 

integrity check] [step: 
Time: 1 sec 

integrity check] [step: 
Time: 1 sec 

integrity check] [step: 
Time: 1 sec 

setup triggers][step: Stage]: started 

Time: 1 sec 

data migration][step: EAV Step]: started 

Time: 1 sec 

volume check][step: EAV Step]: started 

Time: 1 sec 

data migration][step: Customer Attributes Step]: started 
Time: 1 sec 

volume check][step: Customer Attributes step]: started 
Time: 1 sec 

data migration][step: Map Step]: started 

Time: 1 sec 

volume check][step: Map Step]: started 

Time: 1 sec 

data migration][step: Url Rewrite Step]: started 

Time: 1 sec 

volume check][step: Url Rewrite Step]: started 

Time: 1 sec 

data migration][step: Log Step]: started 

Time: 1 sec 

volume check][step: Log Step]: started 

Time: 1 sec 

data migration][step: Ratings Step]: started 

Time: 1 sec 

volume check][step: Ratings step]: started 

Time: 1 sec 

data migration][step: ConfigurablePrices step]: started 
Time: 1 sec 

volume check][step: ConfigurablePrices step]: started 
Time: 1 sec 

data migration][step: OrderGrids Step]: started 

Time: 1 sec 

volume check][step: OrderGrids step]: started 

Time: 1 sec 

data migration][step: Tier Price Step]: started 

Time: 1 sec 

volume check][step: Tier Price step]: started 

Time: 1 sec 

data migration][step: SalesIncrement step]: started 
Time: 1 sec 

volume check][step: SalesIncrement step]: started 

Time: 1 sec 


EAV Step]: started 


Map Step]: started 

Url Rewrite step]: started 

Log step]: started 

Ratings Step]: started 
configurablePrices step]: started 
Ordercrids step]: started 

Tier Price step]: started 


SalesIncrement Step]: started 


Customer Attributes step]: started 


volume check][step: SalesIncrement Step]: Migration completed 








10. You can check your Magento 2 catalogs, products, orders, and customers if they are 


all updated. If so, you can continue. 
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11. Before you continue, make sure to reindex and flush your caches at once: 
php bin/magento indexer: reindex 
php bin/magento cache:clean 


php bin/magento cache:flush 


12. Now check the frontend and backend whether your data is available in Magento 2. If 
not, check the migration. log file located in /var. 


13. In this recipe, we used a default Magento 1.9.2.2 setup. After the settings and data 
migration, we created a sales order in Magento 1. Now, using the delta option, we 
push the data to Magento 2 using the following command: 


php bin/magento migrate:delta /var/www/magento2/vendor/magento/ 
data-migration-tool/etc/ce-to-ce/1.9.2.2/config.xml 


The output result looks like this: 





2015-12-03 19:54:15][INFO][mode: delta][stage: delta delivering][step: Customer Attributes Step]: started a 
2015-12-03 19:54:16] [INFO] [mode: delta] [stage: volume check][step: Customer Attributes Step]: started J 
[2015-12-03 19:54:16] [INFO] [mode: delta][stage: delta delivering][step: Map Step]: started 
[2015-12-03 19:54:16 INFO][mode: delta][stage: volume check][step: Map Step]: started 

2015-12-03 19:54:16] [INFO][mode: delta][stage: delta delivering][step: Log Step]: started 


[2015-12-03 19:54:16 INFO][mode: delta] [stage: volume check][step: Log Step]: started 
2015-12-03 19:54:16] [INFO] [mode: delta][stage: delta delivering][step: ordercrids step]: started 


[2015-12-03 INFO][mode: delta][stage: volume check][step: OrderGrids step]: started 

2015-12-03 INFO][mode: delta][stage: delta delivering][step: SalesIncrement step]: started 

2015-12-03 INFO][mode: delta] [stage: volume check][step: SalesIncrement step]: started E 
2015-12-03 INFO] [mode: delta][stage: volume check][step: SalesIncrement step]: Migration completed successfully z 
2015-12-03 INFO] [mode: delta] [stage: volume check][step: SalesIncrement Stepi: Automatic restart in 5 sec. Use CTRL-C to abort 
2015-12-03 19 INFO] [mode: delta][stage: delta delivering][step: Customer Attributes Step]: started 

2015-12-03 INFO][mode: delta][stage: volume check][step: Customer Attributes Step]: started 

2015-12-03 19 INFO][mode: delta][stage: delta delivering][step: Map Step]: started 

2015-12-03 INFO][mode: delta][stage: volume check][step: Map Step]: started 

2015-12-03 INFO][mode: delta](stage: delta delivering] [step: Log Step]: started 


2015-12-03 19 
2015-12-03 19 


INFO] [mode: deital è 
[INFO] [mode: delta] [stage: delta delivering][step: OrderGrids step]: started 
































2015-12-03 INFO][mode: delta][stage: volume check][step: OrderGrids Step]: started 

2015-12-03 19 INFO][mode: delta][stage: delta delivering][step: SalesIncrement step]: started 

2015-12-03 INFO][mode: delta] [stage: volume check][step: SalesIncrement Step]: started 

2015-12-03 19 INFO][mode: delta][stage: volume check][step: salesIncrement step]: migration completed successfully 

2015-12-03 INFO][mode: delta][stage: volume check][step: SalesIncrement step]: Automatic restart in 5 pec. use Yere- to abort 











14. Now check your sales and customer data. Congratulations, you successfully migrated 
your database from Magento 1 to Magento 2. 


Let's recap and find out what we did throughout this recipe. In steps 1 through 14, you learned 
how to use the Magento 2 migration tool. 


In step 1, we used Composer to add an additional repository for data migration. After installing 
all of the packages, they are available in the bin/magento tool. In this setup example, we 
used a clean Magento 1.9.x database. 


In step 4, we made sure to run on a clean Magento 2 setup. Depending on your setup, go to 
vendor/magento/data-migration-tool/etc and select the correct version. Magento 
2 supports the migration option for CE and EE. Once we configured the config. xml file with 
the Magento 1 database information in step 6, we were ready to go. 
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In step 7, we used the bin/magento migration setting to start the whole process. We started 
with the setting parameter and continued with the data and delta parameters in steps 

7 through 13. We must not forget the reindexing and updating of our caches before using 
them. The delta parameter option can be run multiple times as it only updates the latest 
information, which is helpful before going live and switching to production. 


As every Magento setup is unique, migrating from Magento 1 to Magento 2 can be hard 
sometimes. In some situations, you may need to change your tables in the mapping 
configuration located in vendor/magento/data-migration-tool/etc/ce-to- 
ce/<version>map.xml.dist. 


Resetting your setting, data, and delta migration is easy using the [-r|--reset] 
parameter in your command. This allows you to rerun all migration scripts from the beginning. 


Always check for the currently supported versions on the Magento GitHub Data Migration Tool 
page at the following link: 


https://github.com/magento/data-migration-tool-ce 


A There is also an alternative Data Migration Tool available 
Q by UberTheme at https: //github.com/ubertheme/ 
magento2 data_migration 





Enabling Performance 
in Magento 2 


In this chapter, we will cover the basic tasks related to optimizing your performance in 
Magento 2. You will learn the following recipes: 

> Configuring Redis for backend cache 

>» Configuring Memcached for session caching 

> Configuring Varnish as a Full Page Cache 

> Configuring Magento 2 with CloudFlare 

> Configuring optimized images in Magento 2 

> Configuring Magento 2 with HTTP/2 

> Configuring Magento 2 performance testing 


Introduction 


This chapter explains one of the most important elements of Magento. From the early 
Magento days, performance has been a hard topic to cover. Many setups out there in the 
e-commerce world are performance-great, but most of the time, the majority are having 
issues. Magento 1 may not be the best performance platform out there. 


However, now we have Magento 2, a brand new platform designed for performance. From the 
very first day, the main Magento developers focused on a better framework and the outcome 
is great. According to the latest information, Magento focused on a Google PageSpeed 
ranking of 90% or more. 





www.allitebooks.com 
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In this chapter, we will dive in deeper on how to configure Redis caching and Memcached 
sessions. By default, Magento 2 supports Varnish, and we will manage all of the steps on 
how to set it up. 


Serving the correct catalog or product images is very important, and will save lots of 
bandwidth on a desktop but most of all on a mobile device, which will have a better 
user experience. 


As we mentioned in Chapter 1, Installing Magento 2 on Apache and NGINX, the new HTTP/2 
protocol is a very new important element in the web server configuration. We will set up a 
full-force HTTP/2 configuration, including SSL. 


For a high-demanding Magento 2 website serving customers all over the globe, we introduce 
CloudFlare, which is a CDN provider optimized for Magento. 


Without performance testing, Magento 2 will not perform well. You will learn how to create a 
company-like profile, including websites, stores, catalogs, products, orders, and much more. 


Throughout this recipe, you can pick your own preferred hosting setup 
A as we did in Chapter 1, Installing Magento 2 on Apache and NGINX. 
Q We will be using an NGINX-based setup. The Apache setup is pretty 
straightforward; when needed, we will address specified configuration 
settings when they occur. 





Configuring Redis for backend cache 


Redis may be one of the best improvements since we used Memcache(d) or Alternative 
PHP Cache (APC). For the last couple of years, Redis is available in Magento 1 and has 
a big performance benefit. 


What is Redis and why is it important for Magento? Well, Redis is not new; its initial release 
dates to the beginning of 2009—almost as young as Magento 1. Redis is a key-value storage 
database that stores the data in-memory of your web server. Besides this, the in-memory 
caches are fast and also have a persistence feature that is really important when a server 
reboots. All caches are not flushed during a reboot and are available in-memory when the web 
server is up again. 


In the beginning of the Magento 1 area, we used Memcache(d) or APC, which worked very 
well but not as well as Redis. In Magento 1, Redis was used for a backend cache and session 
storage most of the time. Some websites also used it as a Full Page Cache (FPC) storage. 


One other great advantage of Redis is that it has multiple database containers, one for the 
default cache and the other for the FPC. Although the Redis performance is better in a lot of 
cases, it is not the Holy Grail. There are drawbacks to its architecture. 
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Getting ready 


For this recipe, we will use a Droplet created in Chapter 2, Magento 2 System Tools, at 
DigitalOcean, https: //www.digitalocean.com/. We will be using NGINX, PHP-FPM, 
and a Composer-based setup, including sample data connected to a Redis server. No other 
prerequisites are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to create a Magento 2 Redis setup. 
The following steps will guide you through this: 


1. 


First, we need to install the Redis server and Redis PHP client before we can connect 
it to Magento. Follow the next step on the shell: 


cd /opt 

wget http://download.redis.io/releases/redis-3.0.5.tar.gz 
tar xzf redis-3.0.5.tar.gz 

cd redis-3.0.5 


make && make install 
Change the version number of the current one if needed. 


Go to the /opt /redis-3.0.5/utils directory and run the following script: 


./install-server.sh 


Commit to the following questions: (Press Enter to all of them; the default is just fine.) 
Welcome to the redis service installer 


This script will help you easily set up a running redis server 


Please select the redis port for this instance: [6379] 
Selecting default: 6379 

Please select the redis config file name [/etc/redis/6379.conf] 
Selected default - /etc/redis/6379.conf 

Please select the redis log file name [/var/log/redis 6379.1log] 
Selected default - /var/log/redis 6379.log 


Please select the data directory for this instance [/var/lib/ 
redis/6379] 


Selected default - /var/lib/redis/6379 


Please select the redis executable path [/usr/local/bin/redis- 
server] 








Enabling Performance in Magento 2 


Selected config: 


Port : 6379 

Config file : /etc/redis/6379.conf 

Log file : /var/log/redis 6379.log 
Data dir : /var/lib/redis/6379 
Executable : /usr/local/bin/redis-server 


Cli Executable : /usr/local/bin/redis-cli 

Is this ok? Then press ENTER to go on or Ctrl-C to abort. 
Copied /tmp/6379.conf => /etc/init.d/redis 6379 
Installing service... 

Success! 

Starting Redis server... 


Installation successful! 


4. Now let's test our Redis server using the following command: 
redis-cli -version 
service redis 6379 status 


netstat -anp | grep redis 
As you can see, the Redis server is running under port 6379. 


5. The next important element is installing a PHP module that can communicate with 
the Redis server. We will use PHP Redis here (https: //github.com/phpredis/ 
phpredis). 

Use the following command to install PHP Redis: 

cd /opt 

git clone https://github.com/phpredis/phpredis.git 
cd phpredis 

phpize 

./configure 


make && make install 
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Now, we need to let PHP know there is a Redis extension available that we can use. 
Run the following command: 


echo "extension=redis.so" | sudo tee /etc/php5/mods-available/ 
redis.ini 


Depending on whether you are using PHP 5 or PHP 7, you may want to change the 
PHP path. 


Now we need to link the Redis PHP extension to PHP-FPM and PHP CLI. Run the 
following commands: 


cd / 

ln -s /etc/php5/mods-available/redis.ini /etc/php5/fpm/conf.d/20- 
redis.ini 

ln -s /etc/php5/mods-available/redis.ini /etc/php5/cli/conf.d/20- 
redis.ini 


If everything is correct, we can restart the PHP-FPM server to activate the Redis PHP 
extension. Run the following command: 


service php5-fpm restart 


To make sure that the Redis PHP and Redis server are running together, we can use 
the following command: 


php -r "if (new Redis() == true){ echo \"\r\n OK \r\n\"; }" 


By default, creating a phpinfo.php page in the root directory in Magento 2 will not 
work. First, you need to create the phpinfo.php file in the /pub directory. Then, you 
need to change the NGINX configuration (nginx. conf.sample) from location 

~ (index|get|static|report|404|503)\.phps {to location ~ (inde 
x|get|static|report |404|503|phpinfo)\.phps {, which is located at the 
bottom of the file. In Apache, we don't have an issue like this; it works by default. 


A Use phpinfo.php wisely on a production environment. Sharing 
Q this information on a production website is not advised and could 
expose your security risks. 


. Congratulations, you just finished the Redis server and PHP Redis setup. Now let's 
continue with the Magento 2 part. 
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11. Open the env. php file in Magento 2 located at /app/etc and add the following 
code at the top: 


P 


<?php a 
return array ( 
"cache" => 
array ( 
"frontend' => 
array ( 
"default" => 
array ( 
"backend' => 'Cm Cache Backend _Redis', 
"backend options" => 
array ( 
"server' => '127.0.0.1', 
"port" => '6379', 
"persistent" => '', 
"database' => '0', 
‘force standalone’ => '0', 
"connect _retries' => '1', 
"read timeout’ => '10', 
"automatic cleaning factor" => '0', 
‘compress data' => '1', 
‘compress tags' => '1', 
"compress threshold" => '20480', 
‘compression_lib' => 'gzip', 
, 
), 
"page cache’ => 
array ( 
"backend' => 'Cm Cache Backend _Redis', 
"backend options" => 
array ( 
"server' => '127.0.0.1', 
"port' => '6379', 
"persistent' => '', 
"database' => '1', 
"force standalone’ => '0', 
"connect_retries' => '1', 
‘read timeout’ => '10', 
"automatic cleaning factor" => '0', 
‘compress data’ => '0', 
‘compress _tags' => '1', 
"compress threshold" => '20480', 
‘compression lib’ => 'gzip', 





de 

)e 
)- 
"backend' => 
array ( 

"frontName' => ‘admin', 
d, 
‘install' => 
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12. As you can see, we are using two databases—one for the default cache and one 
for page_cache (Full Page Cache). Now, save your file and remove any cache in 
/var/page_cache and /var/cache. Let's open up your browser and refresh 
your website. 


If everything is configured correctly in the env. php file, you should not get any errors 
and the ar/page_cache and var/cache directories should be empty. 


13. To check how many keys Redis received, we can run the following command from 
the shell: 


redis-cli 


On the prompt, continue with INFO; this will give you a list of the following details: 





root@mage2 cookbook: /var/www/magento2/var/cache# redis-cli INFO 
# Server 

redis_ version:3.0.5 

redis_git_shai:00000000 

redis_ git_dirty:0 

redis build id:76f6ee2908f61611 
redis_mode:standalone 

os:Linux 3.13.0-57-generic x86 64 

arch bits:64 

multiplexing api:epoll 

gcc_version:4.9.2 

process _id:9713 

run_id: 8eb836577d6éf3ec4a2diai79ee99e538543589e6 
tcp _port:6379 

uptime_in_ seconds:86922 

uptime_in days:1 

hz:10 

lru_clock: 6845253 

config file:/etc/redis/6379.conf 


# Clients 

connected clients:i 
client_longest_output_list:0 
client_biggest_input_buf:0 
blocked clients:0 


# Memory 

used_memory:5661432 

used memory human:5.40M 
used_memory rss:11952128 
used memory peak:7778328 
used_memory peak human:7.42M 
used_memory_ 1ua:39936 
mem_fragmentation_ratio:2.11 
mem allocator: jemalloc-3.6.90 











To close the Redis terminal, use exit. 
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14. Congratulations, you just finished configuring the Redis server and PHP Redis 
with Magento 2. 


Let's recap and find out what we did throughout this recipe. In steps 1 through 13, we 
installed a Redis server and configured Magento 2 to store the backend cache. 


In step 1, we installed Redis from source and compiled the code. This version is more stable 
than the default one available in Ubuntu. After compiling the code, we are able to use an 
install script to create a working setup running on port 6379. 


After installing and testing the code in steps 3 and 4, we start installing the PHP Redis 
module. This code is pulled from GitHub and compiled from source. 


In step 6, we created a redis. ini file, which is linked in step 7 with the correct PHP module 
directory. Before we can test it, we need to restart the PHP-FPM server and use a simple PHP 
command to test if everything is working fine. 


In step 11, we added an additional piece of code to the env. php file, which will tell 
Magento 2 to store all of the cache in Redis as of now. 


If you are interested in monitoring your Redis server, the next step is interesting. Clone 
PHPRedMin (https: //github.com/sasanrose/phpredmin) in your Magento 2 root 
directory, /var/www/htm1. Make sure to change the ownership to www-data for the owner 
and group. 


Go to your /var/www/htm1/pub directory and create a symbolic link using the following 
command: 


ln -s ../phpredmin/public phpredmin 
Chown the ownership of the symbolic link with the following command: 


chown -h www-data:www-data phpredmin 
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Go to to your NGINX configuration directory, /etc/nginx/conf.d, open the default .conf 
file, and including the following content below error_log: 


location ~ */phpredmin/.+\.php { 
fastcgi_split_path_info *(.+\.php) (/.+)$; 


set $fsn /index.php; 
if (-£ $document_root$fastcgi_script name) { 
set $fsn $fastcgi_script_name; 


} 


# php5-fpm 
fastcgi_pass fastcgi_ backend; 
fastcgi_index index.php; 


fastcgi_param SCRIPT_FILENAME S$document_root$fsn; 
fastcgi_param PATH INFO S$fastcgi_path_info; 
fastcgi_param PATH TRANSLATED S$document_root$fsn; 





include fastcgi_ params; 


} 


Now save and restart your NGINX server with service nginx restart. 


Before we can continue, we need to add a cronjob rule to gather our Redis data and show it in 
PHPRedMin. Add the following rule to your crontab. 


Open crontab using crontab -e: 


* * * * * cd /var/www/html/pub/phpredmin && php index.php cron/index 
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Open your browser and surf to http: //yourdomain.com/phpredmin, and press Stats in 
the top menu. Now you should see the following information: 


ful] Stats 





@ localhost:6379 DBO 


Redis Stats 





w localhost:6379 


DBO 


in order to view stats, you have to setup cron located in controllers directory 
== Q Filter 


+ Add DB Memory & CPU Clients Keys AOF 


@ Memory Usage 
5.95M 


5.00M 
4.00M 
3.00M 


2.00M 





816k 
Dec 09 12:12 Dec 09 13:43 Dec 09 15:06 Dec 09 16:30 Dec 09 17:53 Dec 09 20 


@ User CPU Usage @ System CPU Usage 


55.0 





50.0 
48.0 
Dec 09 12:12 Dec 09 13:43 Dec 09 15:06 Dec 09 16:30 Dec 09 17:53 Dec 09 20 











= On a production site, you will want to add an IP block so 
that only you can gain access. 
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Configuring Memcached for session caching 





As Magento 2 does not support Redis session caching from the beginning, we need to 
use Memcached instead. Memcached has been around for a long time and was used 
in Magento 1, since the beginning, as backend and session caching. 


Memcached is a distributed memory caching system. It is a flexible in-memory storage 
container to cache data. As the session handler in the PHP Redis does not support session 
locking, we use Memcached instead. Keep in mind that Memcached is not persisted, so 
after restarting the server or daemon, all the data is gone. This could have an impact on a 
production environment—lost sessions or baskets. 


Getting ready 


For this recipe, we will use a Droplet created in Chapter 2, Magento 2 System Tools, at 
DigitalOcean, https: //www.digitalocean.com/. We will be using NGINX, PHP-FPM, and 
a Composer-based setup including sample data connected to a Memcached server. No other 
prerequisites are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to create a Magento 2 Memcached 
setup. The following steps will guide you through this: 


1. First, we need to install the Memcached server and Memcached PHP client before we 
can connect it to Magento. Follow the next step on the shell: 
apt-get install -y libevent-dev 


apt-get install -y memcached 


2. Now let's test our Memcached server using the following command: 
memcached -V 
service memcached status 


netstat -anp | grep memcached 
As you can see, the Memcached server is running under port 11211. 


3. The next important element is installing a PHP module that can communicate with 
the Memcached server. We will be using the PHP Memcached extension and not the 
PHP Memcache extension (without the d at the end). The PHP Memcached (d) will be 
supporting PHP 7. 

Use the following command to install PHP Memcached: 
apt-get install php5-memcached 
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We can also use the following command to install it: 

apt-get install php-memcached (php7) 

Now let's check whether PHP has the correct Memcached extension installed. Run 
the following command: 


cat /etc/php5/mods-available/memcached.ini 


Now you should see the Memcached extension called extension=memcached. so. 


Depending on whether you are using PHP 5 or PHP 7, you may want to change the 
PHP path. 


If everything is correct, we can restart the PHP-FPM server to activate the 
Memcached PHP extension. Run the following command: 


service php5-fpm restart 


To make sure that the Memcached PHP and Memcached servers are running 
together, we can check using the following command: 


php -r "if (new Memcached() == true){ echo \"\r\n OK \r\n\"; }" 


It can also be checked using the following command: 


echo "stats settings" | nc localhost 11211 


By default, creating a phpinfo.php page in the root directory in Magento 2 will not 
work. First, you need to create the phpinfo. php file in the /pub directory. Then, you 
need to change the NGINX configuration from location ~ (index|get|static| 
report |404|503)\.phps { tolocation ~ (index|get|static|report |4 
04|503|phpinfo)\.phps {, which is located at the bottom of the file. In Apache, 
we don't have an issue like this; it works by default. 


my) Use phpinfo.php wisely on a production environment. Sharing 
Q this information on a production website is not advised and could 
expose your security risks. 


Congratulations, you just finished the Memcached server and PHP Memcached 
setup. Now let's continue with the Magento 2 part. 


Open the env. php file in Magento 2 located at /app/etc and change the following 
code in the session section: 
"session! => 

array ( 

'save' => 'files', 


) i 
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Change the preceding code to the following: 
"session! => 
array ( 
'save' => 'memcached', 
'save_path' => 'localhost:11211' 
) + 


This is shown in the following screenshot: 





'force_standalone' => '0', = 
'connect_retries' => '1', 

'read timeout' => '10', 
'automatic_cleaning_factor' => '0', 
'compress_data' => '0', 

'compress_tags' => '1', 

'compress_threshold' => '20480', 
'compression_lib' => 'gzip', 


s 

)s 
de 
"backend' => 
array ( 

"frontName’ => ‘admin’, 
de 
‘install' => 
array ( 

"date' => "Mon, 07 Dec 2015 20:24:04 +0000', 


‘crypt' => 
array ( 
"key' => '34e657735c8407762ff96c8125dc62fa', 
de 
"session' => 
| array ( 
"save' => "memcached', 
"save_path' => 'localhost:11211', 
de 
'db' => 
array ( 
"table prefix' => '', 
connection’ => 
array ( 
‘default’ => 
array ( 
"host' => ‘localhost', 
'dbname' => ‘'magento2', 





60,1 50% + 
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9. Now save your file and remove any caches and sessions in var/page_cache, 
var/cache and var/session. Restart your website using the following command: 


service nginx restart && service php-fpm restart 


Let's open up your browser and refresh your website. 


If everything is configured correctly in the env. php file, you should not get any errors 
and the /var/session directory should be empty. 


10. To check how many keys Memcached received, we can run the following command 
from the shell: 


echo "stats items" | ne localhost 11211 


11. Congratulations, you just finished configuring the Memcached server and PHP 
Memcached with Magento 2. 


Let's recap and find out what we did throughout this recipe. In steps 1 through 11, we 
installed a Memcached server and configured Magento 2 to store the sessions. 


In steps 1 through 3, we installed the default Ubuntu Memcached server and PHP 
Memcached client modules. Depending on whether we are using PHP 5 or 7, we picka 
different one. Before this, we make sure to restart the PHP-FPM server and test if everything 
is working correctly. 


In step 8, we added an additional piece of code to the env. php file, which will tell Magento 2 
to store all of the sessions in Memcached as of now. 


If you are interested in monitoring your Memcached server, the next step is interesting. Clone 
the memcached. php file from the GitHub Gist (https: //gist.github.com/raybogman/ 
b8b7b4d21b£34ed9dd76) in your Magento 2 root directory, /var/www/html1/pub. Make 
sure to change the ownership to www-data for the owner and group. 


By default, creating a memcached. php page in the root directory in Magento 2 will not 

work. First, you need to store the memcached. php file in the /pub directory. Then, you 

need to change the NGINX configuration from location ~ (index|get|static|repo 
rt|404|503)\.phps { tolocation ~ (index|get|static|report |404|503|mem 
cached) \.php$ {, which is located at the bottom of the file. In Apache, we don't have an 
issue like this; it works by default. 
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Once installed correctly, the page will look as follows: 


Harun Yayli 








Host Status Diagrams 
mage2cookbook.com/memcached.php Cache Usage Hits & Misses 


| Refresh Data ff |View Host Stats [Mf Variables | 


General Cache Information 


PHP Version | 7.0.3-3+deb.sury.org~trusty+1 
Memcached Host 1.127.0.0.1:11211 eats aa 
Total Memcache Cache | 1.0 MBytes : a 


Memcache Server Information 











127.0.0.1:11211 [Flush this server] 
Start Time 2016/02/11 13:20:18 
Uptime 0 minutes 
Memcached Server Version 1.4.14 (Ubuntu) E] Free: 1.0 MBytes (100.0%) E] Hits: 1 60.0%) 
Used Cache Size 0.0 Bytes I Used: 0.0 Bytes (0.0%) E Misses: 1 (60.0%) 
Total Cache Size 1.0 MBytes 
Cache Information 
Current Items(total) 0 (0) 
Hits 1 
Misses 1 
Request Rate (hits, misses) 0.40 cache requests/second 
Hit Rate 0.20 cache requests/second 
Miss Rate 0.20 cache requests/second 
Set Rate 0.00 cache requests/second 





i Note that this Memcached viewer is an outdated version created in 2008 
>< by Harun Yayli and is not maintained anymore. Use it wisely. 
As an alternative, you can also use https: //github.com/ 
clickalicious/phpMemAdmin. 





Configuring Varnish as the Full Page Cache 


Varnish may be one of the most interesting elements described in this book, besides Magento 
2, of course. What is Varnish and why is it that important? Well, Varnish is like a Ferrari, 

very fast on the track but hard to maintain or tune. In technical terms, Varnish is an HTTP 
accelerator designed for heavy websites. Magento users love fast websites. 


By default, Varnish support is now included in Magento 2. In Magento 1, we commonly used 
Turpentine by Nexcess (https ://github.com/nexcess/magento-turpentine). The 
configuration of Varnish is not for the faint-hearted. Varnish includes a Varnish Configuration 
Language (VCL) file, which holds all the elements to be cached or not. 


Setting up a Varnish server may be simple; configuring the VCL is not. Magento 2 provides a 
default VCL file that works out of the box, but be aware of any custom extensions or layout 
updates. Any customization has to be added manually in the VCL file before Varnish can 
cache them. 
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1 
> By default, Varnish does not support HTTPS; you may 
need an SSL proxy such as NGINX or Apache to do this. 


Getting ready 


For this recipe, we will use a Droplet created in Chapter 2, Magento 2 System Tools, at 
DigitalOcean, https: //www.digitalocean.com/. We will be using NGINX, PHP-FPM, 
and a Composer-based setup including sample data connected to a Varnish server. No other 
prerequisites are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to create a Magento 2 Varnish 
setup. The following steps will guide you through this: 


1. 


First, we need to install the Varnish server before we can connect it to Magento. 
Follow the next step on the shell: 


apt-get install -y apt-transport-https 
By default, all current Ubuntu versions support apt-transport-https. 


Let's create a new Varnish repository using the following code: 

echo "deb https://repo.varnish-cache.org/ubuntu/ trusty 
varnish-4.1" | sudo tee -a /etc/apt/sources.list.d/varnish-cache. 
list 

Add the Varnish key to our system using the following command: 

curl https://repo.varnish-cache.org/GPG-key.txt | apt-key add - 
Now we can update our server so that the Varnish software is made available for use. 
Run the following command: 

apt-get update && apt-get install -y varnish 


service varnish start 


Now let's test our Varnish server using the following command: 
varnishd -V 
service varnish status 


netstat -anp | grep varnish 


As you can see, the Varnish server is running under ports 6081 and 6082. 
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10. 


11. 
12. 


Before we can use Varnish as a frontend server, we need to change the NGINX or 
Apache port. In NGINX, we use the following command: 


sed -i 's/80/8080/' /etc/nginx/conf.d/default.conf 


We are using port 8080 as an internal port. 
Your configuration file could look as follows: 


server { 
listen 8080; 


server name yourdomain.com; 


Now let's update the Varnish server. We need to change the default port 6081 to 80. 
Use the following command to change the /etc/default/varnish file: 


sed -i 's/6081/80/' /etc/default/varnish 


By default, there is a small bug in the Ubuntu system that is using the new systemd 
setup. The systemd servers will not update their configuration script after a restart 
or reboot. Let's update this manually using the following command: 


sed -i 's/6081/80/' /lib/systemd/system/varnish.service 


Update the systemd process with the following code: 


systemctl daemon-reload 


Next, we restart the Varnish and NGINX (or Apache) servers. Run the following 
command: 


service varnish restart && service nginx restart 


Now you can check whether Varnish and NGINX are running on the correct port. Use 
the following command: 


netstat -upnit | egrep 'varnish|nginx' 


Congratulations, Varnish is running on port 80 and NGINX is running on port 8080. 


Now update Magento. Log in to the backend of your Magento site, navigate to Stores 
| Configuration | Advanced | System | Full Page Cache, and select Varnish 
Caching in the drop-down menu. If you are running Varnish on the same server as 
your website, you are okay with the localhost and backend port 8080. It's better to 
install Varnish on a single dedicated server. You may need to change these settings 
correctly. Export the correct VCL for the Varnish file. As we are using Varnish 4, we will 
download it. 
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Always make sure that Magento is running in the developer mode when setting up 
Varnish. When ready to launch, we can switch to the production mode: 





Scheduled Backup Settings 


ADVANCED 
Full Page Cache 
Admin 
System Caching Application | Varnish Caching = 

Advanced TTL for public content | 86400 
Public content cache lifetime in seconds. If field is 
empty default value 86400 will be saved. 

Developer 


© Varnish Configuration 


Access list 


Backend host 


Backend port 


Export Configuration 


localhost 
IPs access list separated with ',' that can purge 
Varnish configuration for config file 


generation. If field is empty default value 
localhost will be saved. 


localhost 
Specify backend host for config file 


generation. If field is empty default value 
localhost will be saved. 


8080 
Specify backend port for config file 


generation. If field is empty default value 
8080 will be saved. 


Export VCL for Varnish 3 


Export VCL for Varnish 4 





13. Copy the file to the server and replace the current /etc/varnish/default 
file. Now open the file and change backend default to the following: 


backend default { 
-host = "127.0.0.1"; 
-port = "8080"; 


evel 
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14. Now let's restart the Varnish server to use the current VCL setup and flush our 
Magento cache: 


service varnish restart 
php bin/magento cache:clean 


php bin/magento cache:flush 


15. Using the Magento 2 developer mode is necessary; it will show us an X-Magento- 
Cache-Debug notice. Use the following command to see if we have received a 
cache HIT: 


curl -I http://yourdomain.com 


The output of this command should be as follows: 

root@mage2cookbook:~# curl -I http://mage2cookbook.com 
HTTP/1.1 200 OK 

Date: Mon, 14 Dec 2015 19:15:40 GMT 

Content-Type: text/html; charset=UTF-8 

X-Frame-Options: SAMEORIGIN 

X-Content-Type-Options: nosniff 

X-XSS-Protection: 1; mode=block 

X-Magento-Cache-Control: max-age=86400, public, s-maxage=86400 
Pragma: no-cache 

Expires: -1 

Cache-Control: no-store, no-cache, must-revalidate, max-age=0 
Vary: Accept-Encoding 

Age: 1127 

X-Magento-Cache-Debug: HIT 

Accept-Ranges: bytes 


Connection: keep-alive 


16. Congratulations, you just finished configuring a Varnish server with Magento 2. 


Let's recap and find out what we did throughout this recipe. In steps 1 through 16, we 
installed and configured Varnish to speed up the full page caching. 


In steps 1 through 4, we added the official repository to our system and installed Varnish. 


In steps 6 and 7, we changed the NGINX port to 8080 instead of 80, and the Varnish port 
to 80. Now, Varnish will be our gatekeeper after restarting the NGINX and Varnish servers. 
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In step 12, we told Magento to start communicating with the Varnish server so that all 
frontend cacheable data is stored here. 


The current lifetime of the cache is 86,400 seconds, which is one day. So, installing a cache 
warmer will soeed up your pages after an automatic cache flush by Magento. Always keep in 
mind that by default, all the pages are cold (without a cache hit) and the first GET (page view) 
can take longer. Varnish needs to build up the cache before customers can benefit from it. 


Check out the following Varnish tools to monitor all the incoming data live: 
varnishstat 


The output of this command will be as follows: 
































A eleal z j 
Uptime mgt: 1+00:50:08 Hitrate n: 10 34 34 
Uptime child: 1+00:50:08 avg(n): 0.0716 0.0532 0.0532 
MAIN. uptime 1+00:50:08 
MAIN.sess_conn 964 0.00 0.49 
MAIN.client_req 400 i 0.00 0.00 
MAIN.client_req 4170 0.00 14.63 
MAIN.cache_ hit 2988 0.00 11.94 
MAIN.cache_miss 1004 0.00 2.69 
MAIN. backend_reuse 1192 0.00 0.94 
MAIN. backend_recycle 1704 0.00 1.01 
MAIN.fetch_length 146 0.00 0.16 
MAIN. fetch_chunked 1535 0.00 0.85 
MAIN.fetch_304 23 0.00 . 0.00 
MAIN.pools 2 0.00 2.00 
MAIN.threads 200 0.00 200.00 
MAIN.threads_created 200 0.00 0.00 
MAIN.busy_sleep 1575 0.00 0.00 
MAIN.n_object 691 0.00 683.27 
MAIN.n_objectcore 700 0.00 
MAIN.n_objecthead 706 0.00 
MAIN.n_backend i 0.00 . 
MAIN.n_ expired 313 0.00 
MAIN.s sess 964 0.00 
MAIN.s req 4170 0.00 
MAIN.s pipe S 0.00 
MAIN.s_pass 678 0.00 
MAIN.s_fetch 1682 0.00 . 
MAIN.s_req_hdrbytes 3.06M 0.00 35.00 
MAIN.s_req_bodybytes 74.59K 0.00 Ps 
MAIN.s_resp_hdrbytes 1.79M 0.00 20.00 
MAIN.s_resp_bodybytes 18.13M 0.00 212.00 

pipe hdrbytes 98 0.00 
J Yy.uptime | 
Child process uptime: =| 
How long the child process has been running. | 
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Now, let's execute the following command: 


Varnishlog 


The output of this command will be as follows: 











- RespHeader 
- RespHeader 
- RespHeader 
- RespHeader 
- RespHeader 
- RespHeader 
- RespHeader 
- RespHeader 


- RespHeader 
- RespHeader 
- RespHeader 
- RespHeader 
- VCL_call 

- RespHeader 
- RespUnset 

- RespUnset 

- RespUnset 

- RespUnset 

- RespUnset 

= VCL_return 
- Timestamp 

- RespHeader 
- RespHeader 
- Debug 

- RespHeader 
- Timestamp 

- ReqAcct 

= End 


+ << Session 
- Begin 

- SessOpen 

= Link 

= SessClose 
= End 


>> 


Cache-Control: max-age=0, must-revalidate, no-cache, no-store a 
Expires: Sun, 14 Dec 2014 19:12:50 GMT 

X-Magento-Debug: 1 

X-Frame-Options: SAMEORIGIN 

X-Content-Type-Options: nosniff 

X-XSS-Protection: 1; mode=block 

Content-Encoding: gzip 

X-Magento-Cache-Control: max-age=0, must-revalidate, no-cache, no-st 


Vary: Accept-Encoding 
X-Varnish: 33363 


Age: 0 
Via: 1.1 varnish-v4 
DELIVER 


X-Magento-Cache-Debug: MISS 

X-Magento-Debug: 1 

X-Powered-By: PHP/5.6.16-2+deb.sury.org~vivid+1 
Server: nginx 

X-Varnish: 33363 

Via: 1.1 varnish-v4 

deliver 

Process: 1450120370.749732 0.484267 0.000036 
Accept-Ranges: bytes 

Content-Length: 224 

"RES_MODE 2" 

Connection: keep-alive 

Resp: 1450120370.749784 0.484319 0.000052 
572 165 737 811 224 1035 


33362 

sess 0 HTTP/1 

66.249.79.225 36032 :80 159.203.127.99 80 1450120370.265299 15 
req 33363 rxreq 

REM CLOSE 5.533 








Configuring Magento 2 with CloudFlare 


Are you managing an international-based brand-serving customer all over the globe? Then, 
using a Content Delivery Network (CDN) is the best idea. CDNs are a well-known technique to 
manage high-traffic websites. It is commonly used to distribute static assets such as images, 
CSS, and JavaScript as quickly as possible to the nearest location of the customers, which 
decreases the download times of the website. 
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The modern CDNs have much more to offer than just serving the assets to the customer. 
Currently, they improve the user experience with optimized HTML output, merging and 
deferring JavaScript, TCP optimization, and much more. Basic or advanced security is 
also top-of-mind, such as (D)DoS protection, SSL, Web Application Firewall (WAF), 

and much more. 


x Before using a CDN on production, test which CDN provider fits 
Q best for your purpose. Make sure that the POP locations that they 
serve match your customer locations. 


Getting ready 


For this recipe, we will use a Droplet created in Chapter 2, Magento 2 System Tools, at 
DigitalOcean, https: //www.digitalocean.com/. We will be using NGINX, PHP-FPM, 
and a Composer-based setup including sample data connected to the CloudFlare CDN. 
No other prerequisites are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to create a Magento 2 Varnish 
setup. The following steps will guide you through this: 


1. First, we need to create an account at CloudFlare. Go to https: //www. 
cloudflare.com/a/sign-up and complete the supplied form. 


2. Now adda website URL. Choose the default URL of your Magento website, 
(We can add more URLs under the same CloudFlare account later.) and 
press Scan DNS Records: 
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Get Started With CloudFlare 


¥ Add Website 


Add your first website. You can add more after this signup 
process, 


Sù Add DNS Records 


We will scan your DNS records. You can modify your DNS records 
before moving on. 


:= Select Plan 
Select the plan that meets your needs. 
yo Update Nameservers 


Sign into your registrar to update your current nameservers with 
CloudFlare nameservers. 


Add a website 


There is no downtime when you add a domain. 


Scan DNS Records 











Once completed, we need to verify that all of our DNS records are listed. This step is 
really important so make sure to check your current DNS settings and compare or 
add them to your CloudFlare DNS setup. By default, CloudFlare cannot match all the 
DNS records automatically. 
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Changing your records in this screen will not change anything in production yet. We 
still need to adjust the primary and secondary Nameservers before everything works. 
We will do this as shown in the following screenshot: 


yourdomain.com 





Verify That All Of Your DNS 
Records Are Listed Below 


DNS Records For yourdomain.com 


A, AAAA, and CNAME records can have their traffic routed 
through the CloudFlare system. Add more records using 
this form, and click the cloud next to each record to toggle 
CloudFlare on or off. 

, eM 


orig erver exposing your origin If 


An A, AAAA or CNAME record was not found pointing to 


Q the root domain. The bogman.info domain will no 
oly 


On CloudFlare 
Traffic will be accelerated and protected by CloudFlare 





off CloudFlare 


Traffic will bypass CloudFlare's network 


Q Search DNS record 
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Choose your CloudFlare plan. Let's start with the Free Website plan. In a production 
environment, upgrading to a Pro or Business account is simple; just complete the 
billing form and you are all set. All new features will be available on the fly and 
ready to use: 


yourdomain.com 





Select a CloudFlare Plan 


Select a CloudFlare Plan 


© Free Website 





v Free 


v Free website 


v Free plan 


¥ Basic security protection 


v Fast website performance 


¥ SSL (Limited browsers) 


¥ Always online 


Learn More > 











Now we need to update our Nameservers. CloudFlare will list the Nameservers that 
we need to complete the last step. 


Depending on your current DNS provider, this could be a simple or hard step. 
Changing the Nameservers is not always allowed by your provider. 


aM When ordering a new domain, check whether your provider allows 
Q you to change the Nameservers. Choosing the correct domain 
provider is not always a simple job. 
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6. After changing the Nameservers, we need to wait a maximum of 24 hours. The time 
depends on how quickly your current DNS provider updates them. 


You can check your e-mail or refresh the CloudFlare dashboard to check whether your 
domain is Active: 


yourdomain.com v 





Overview 





yourdomain.com iv) 


Status: Active 


This website is active on CloudFlare. 


Quick Actions 


Advanced » 











7. Let's go to the DNS dashboard and check whether our domain name is served using 
the CloudFlare accelerated and protection technique. 


Once the cloud is orange, including an arrow passing through, then you are 
connected. Click on the cloud icon to change it: 





On CloudFlare 
Traffic will be accelerated and protected by CloudFlare 


Off CloudFlare 


Traffic will bypass CloudFlare's network 











8. Let's check whether the DNS server is serving the correct records and CloudFlare is 
working. Run the following command on the shell of your current server: 


dig yourdomain.com NS +short 


The output looks as follows: 
root@mage2cookbook:~# dig mage2cookbook.com NS +short 
rocky.ns.cloudflare.com. 


kate.ns.cloudflare.com. 
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You can also use the following command to check the IPs: 


dig yourdomain.com +short 


The output looks as follows: 

root@mage2cookbook:~# dig mage2cookbook.com +short 
104.18.56.216 

104.18.57.216 


9. Congratulations, you just finished configuring a CloudFlare CDN server with 
Magento 2. 


Let's recap and find out what we did throughout this recipe. In steps 1 through 9, we installed 
CloudFlare as a CDN to optimize our worldwide performance. 


In steps 1 through 8, we created an account and moved our domain to the CloudFlare DNS. In 
step 7, we activated the orange cloud in DNS to start using the CDN optimization. 


If you are interested in how to test the performance of the CloudFlare setup, stay put. Here are 
some basic commands that you can use: 


time curl --I http://yourdomain.com 
The output looks as follows: 


time curl -I http://mage2cookbook.com 
HTTP/1.1 200 OK 
X-Magento-Cache-Debug: HIT 

Server: cloudflare-nginx 


CF-RAY: 257330a8444d2bd6 -AMS 


real Om0.198s 
user Om0.006s 
sys Om0.005s 
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Without CloudFlare, it looks as follows: 


time curl -I http://mage2cookbook.com 
HTTP/1.1 200 OK 
X-Magento-Cache-Debug: HIT 


real 0m0 .253s 
user 0m0. 011s 
sys 0m0 .010s 


Keep in mind that this current website is using Varnish. Our Magento 2 server is located in 
New York while our test server is located in Amsterdam. As you can see, in this test, we save 
0.055s. This test is done from server to server. Doing a test from server to real browser 
clients on a desktop, or mobile device, will result in larger numbers. Larger numbers result in 
slower connections, which will result in lesser user experience. 


Another great load testing tool is Siege. Using Siege helps you to understand how many 
concurrent clients can visit your website during high loads. We will just cover the basics of 
Siege here. Install Siege on another Droplet somewhere else in the world. Use the following 
command to install Siege: 


apt-get install siege 


Now let's run the following command. We will simulate 50 concurrent users for a period of 
three minutes. The -d option is the internal delay, in seconds, for which the users sleeps: 


siege -c50 -d10 -t3M http://yourdomain.com 
Without CloudFlare, the output looks as follows: 


siege -c50 -d10 -t3M http://mage2cookbook.com 


Transactions: 1732 hits 
Availability: 100.00 % 

Elapsed time: 179.79 secs 

Data transferred: 15.47 MB 
Response time: 0.18 secs 
Transaction rate: 9.63 trans/sec 
Throughput: 0.09 MB/sec 
Concurrency: 1.71 
Successful transactions: 1732 
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Failed transactions: 0 
Longest transaction: 0.34 
Shortest transaction: 0.15 


With CloudFlare, the output looks as follows: 


siege -c50 -d10 -t3M http://mage2cookbook.com 


Transactions: 1716 hits 
Availability: 100.00 % 
Elapsed time: 179.74 secs 
Data transferred: 14.05 MB 
Response time: 0.10 secs 
Transaction rate: 9.55 trans/sec 
Throughput: 0.08 MB/sec 
Concurrency: 0.96 
Successful transactions: 1716 

Failed transactions: 0 
Longest transaction: 0.62 
Shortest transaction: 0.08 


In the last test, we can see that the Response time is 0.10 seconds compared to 0.18 seconds. 


The test Droplet that we used was located in Amsterdam using two CPUs and 4 GB memory. 

For a real browser test, it is best to use tools such as Chrome developer tools. Those timings 

are more accurate and give you a better idea of the real user experience. Testing on a mobile 
device is a totally different ball game and is out of the scope of this book. 





Configuring optimized images in Magento 2 


Running a Magento store can be difficult—configuring the server, creating store views, and 
adding categories and products. Everyone knows that every product needs at least one 
product image. In some setups, we even have more than one. From this single master image, 
multiple thumbs are created, such as base image, small image, swatch image, and thumbnail. 


By default, images are not optimized for the web when saving them in Photoshop. Images 
shown on a website are not exactly the same as images for print. The Exchangeable Image 
File (EXIF) data, for example, is not needed, and by removing this metadata, you can save lots 
of bytes. The smaller the image, the faster it's shown in the browser of the customer. 
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Here is an example of EXIF data (not optimized). The current file size is 620,888 bytes: 


EXIF Data 


File: 
ExifByteOrder: Big-endian (Motorola, MM) 
CurrentIPTCDigest: 50bb6030364fbdfb1842e98de0e81lefe 
ImageWidth: 1024 
ImageHeight: 768 
EncodingProcess: Baseline DCT, Huffman coding 
BitsPerSample: 8 
ColorComponents: 3 
YCbCrSubSampling: YCbCr4:4:4 (1 1) 


Storing all these images on your Magento server will result in slower pages and slower 
rendering of them. Almost 70% of all the content from a single page is filled with images: 





HTML 
BJs 
H css 
E Me 














So, optimizing images is not only important for desktop users, but also for mobile users. The 
less data they need to download, the better the user experience. Besides this, it's great for 
your search ranking optimization, battery consumption, and bandwidth/data plan. 


By default, Magento 1 did not optimize the created catalog and CMS 
images. This could be optimized using software binaries such as 
al jpegtran, jpegoptim, and OptiPNG. 

` If you don't have the option to install these, you could use Rapido image 
optimizer (https: //www.rapido.nu/), which is a SaaS-based 
image optimizer for Magento. It is also the only optimizer that checks for 
the best available optimization per image and tunes all the images in the 
image cache directory on a daily basis. 
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Getting ready 


For this recipe, we will use a Droplet created in Chapter 2, Magento 2 System Tools, at 
DigitalOcean, https: //www.digitalocean.com/. We will be using NGINX, PHP-FPM, and 
a Composer-based setup including sample data for image optimization. No other prerequisites 
are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to optimize all Magento 2 images. 
The following steps will guide you through this: 


1. 


By default, Magento 2 now uses an optimized GD2 PHP library, which is installed 
during the installation. The following command should be used during installation: 


apt-get install php5-gd 


Instead, we can also use the following command: 
apt-get install php7.0-gd 
To make sure that GD is installed correctly, run the following command: 
php -i | grep gd 
Run the following command to test which version of GD you are running: 
echo '<?php var _dump(gd_ info()); ?>' > gd.php 
php gd.php 
The output looks as follows: 
root@mage2cookbook: /var/www/magento2/pub# php gd.php 
array(13) { 
["GD Version"] => 
string(9) "2.1.1-dev" 

Now let's log in to the backend of your Magento 2 control panel and navigate to the 
Stores | Configuration | Advanced | Developer section. 
Here, you will find the following options: 

a Template Settings 

a JavaScript Settings 

a CSS Settings 

u Image Processing Settings 

o Static Files Settings 
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We first make sure that our Image Adapter is set to PHP GD2. We don't use the 
ImageMagick setting here. In the There's more... section of this recipe, you can find 
more information on this. 


Next, we change the CSS Settings, JavaScript Settings, Static Files Settings, and 
Template Settings. In the Template Settings, adjust Minify HTML to YES. 


Next, enable JavaScript Bundling, Merge JavaScript, and Minify JavaScript to YES. 
Next, enable Merge CSS and Minify CSS to YES. 


Last but not least, enable Static Files to YES. Save all the settings. 


Before we have all the optimized code available, we need to recompile all static 
assets. Let's assume that we are preparing for production. Run the following 
code on the shell: 


php bin/magento deploy:mode:set production 


Before running the code, make sure to change your Apache or NGINX configuration to 
set SMAGE MODE production; (Nginx) of SetEnv MAGE MODE production 
(Apache). In Managing Magento 2, set mode (WAGE_MODE) recipe of Chapter 2, 
Magento 2 System Tools, we covered everything in detail. 


After running this code, make sure to change your user and group permissions. Run 
the following command: 


chown -R www-data:www-data * 


Congratulations, you just finished configuring optimized images, JavaScript, and CSS 
with Magento 2. The following image is a screenshot from the Google PageSpeed 
insight page (https: //developers.google.com/speed/pagespeed/ 
insights/), where you can test your own pages: 





8 Passed Rules 
v Hide details 


Avoid landing page redirects 
Your page has no redirects. Learn more about avoiding landing page redirects. 


Enable compression 
You have compression enabled. Learn more about enabling compression 


Leverage browser caching 

You have enabled browser caching. Learn more about browser caching recommendations. 
Minify CSS 

Your CSS is minified. Learn more about minifying CSS. 


Minify JavaScript 
Your JavaScript content is minified. Learn more about minifying JavaScript 


Optimize images 
Your images are optimized. Learn more about optimizing images 


Prioritize visible content 
You have the above-the-fold content properly prioritized. Learn more about prioritizing visible content 


Reduce server response time 
Your server responded quickly. Learn more about server response time optimization 
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Let's recap and find out what we did throughout this recipe. In steps 1 through 5, we 
configured the image optimizing technique, which is now by default available in Magento 2. 


In step 1, we installed the PHP GD library and tested it. In step 2, we configured the Magento 
backend to start using the optimization by selecting the GD option and additional merging for 
JS and CSS. 


In step 4, we ran the bin/magento production mode to start optimizing all of the code. 


Besides the PHP GD2 library, Magento 2 offers the option to switch to the ImageMagick 
library (http://www. imagemagick.org/). In basis, this library works great for image 
optimization, but during some tests, we found out that the GD2 had a smaller output. Besides 
the difference in size, ImageMagick generated files in the baseline (renders top-down) format 
instead of the progressive (renders from blurry to sharp) format that GD2 does. 


Using progressive is the best commonly used format for web pages. It starts as a blurry 
image and turns sharp when done. It improves the user experience by loading the images 
incrementally. 


If you still want to use ImageMagick, here are some basic commands. Run the following code 
on your shell. Then, switch to ImageMagick in your Magento configuration backend: 

apt-get install -y imagemagick --fix-missing 

apt-get install -y php5-imagick 

service php-fpm restart 


php -i | grep imagick 





Configuring Magento 2 with HTTP/2 


December 17, 2015, is the day Google mentioned that HTTPS pages have top priority by 
default. Many Magento websites still use the default SSL pages or, even worse, don't use 
SSL at all. 


Well, this will change now if your website depends on Google's search ranking. Using HTTP/2 
in your setup is a must for high-performing and secure websites. The new protocol will be the 
new standard for fast and secure browsing. 
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HTTP/2 has many new benefits such as multiple TCP connections, cache pushing (Server 
push), data compression, and much more. By default, HTTP/2 does not need SSL, but many 
browsers out there will Support it only when configured using SSL. NGINX, for example, 
supports HTTP/2 only when configured including SSL; Apache, on the other hand, supports 
both, with or without SSL. 


So, it is mandatory that we start using HTTP/2 including SSL for a safer and faster web. 


Getting ready 


For this recipe, we will use a Droplet created in Chapter 2, Magento 2 System Tools, at 
DigitalOcean, https: //www.digitalocean.com/. We will be using NGINX, PHP-FPM, 
and a Composer-based setup including sample data for HTTP/2. No other prerequisites 
are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to create a Magento 2 using HTTP/2 
including SSL. The following steps will guide you through this: 


1. First, we need to configure and create an SSL certificate. Open openssl. conf 
located in /etc/ss1 with your favorite editor: 
vi /etc/ssl/openssl.conf 


Go to line 127 [ req_distinguished_name ] and change or add the settings 
regarding your company and domain. Change the following lines; here is an example: 


countryName_default = Some-CountryName 
stateOrProvinceName_default = Some-State 
localityName_ default = Some-CityName 
O0.organizationName_default = Some-CompanyName 
organizationalUnitName_default = Some-DepartmentName 
commonName_default = Some-DomainName 
emailAddress default = Some-Email 
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The following screenshot depicts an example of the same: 


Fa E $ 





[ req_distinguished_name ] 
BountryName 

countryName default 
countryName min 
countryName_max 


stateOrProvinceName 
stateOrProvinceName default 





localityName 
localityName_ default 


0.organizationName 
O.organizationName default 








= Country Name (2 letter code) 


= Locality Name (eg, 


AU 
2 
2 


State or Province Name (full name) 
New York 


city) 
New York 


Organization Name (eg, 
Magento 2 CookBook 


company) 


# we can do this but it is not needed normally :-) 


#1.organizationName 
#1.organizationName_ default 


organizationalUnitName 
organizationalUnitName_ default 


commonName 
commonName default 
commonName_max 


emailAddress 
emailAddress default 
emailAddress_ max 


# SET-ex3 

[ req attributes ] 
challengePassword 
challengePassword min 


challengePassword max 


unstructuredName 


= Common Name (e.g. 


Second Organization Name (eg, company) 
World Wide Web Pty Ltd 
Organizational Unit Name (eg, section) 


Kitchen 


* .mage2cookbook.com 
64 


= Email Address 


info@mage2cookbook.com 
64 


SET extension number 3 
A challenge password 
4 


20 


An optional company name 
128,1 


server FQDN or YOUR name) 











40% 





2. After saving your openss1 





. conf file, we can create the *.csr and * . key files. We 


need the * . csr file and send it to our SSL provider. You may pick any SSL provider. 
Run the following command to generate them: 


openssl req -new -newkey rsa:2048 -nodes -keyout yourname.key -out 


yourname.csr 
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Change yourname with any given name. When running the command, questions 
will be asked; hit enter to prompt when the default is okay. Here is a screenshot 
of the process: 

root@mage2cookbook:/etc/ssl# openssl req -new -newkey rsa:2048 -nodes -keyout ma 


ge2cookbook.key -out mage2cookbook.csr 
Generating a 2048 bit RSA private key 








[You are about to be asked to enter information that will be incorporated 
jinto your certificate request. 

[What you are about to enter is what is called a Distinguished Name or a DN. 
There are quite a few fields but you can leave some blank 

For some fields there will be a default value, 

If you enter '.', the field will be left blank. 


jCountry Name (2 letter code) [AU]:US 

State or Province Name (full name) [New York]: 

[Locality Name (eg, city) [New York]: 

jOrganization Name (eg, company) [Magento 2 CookBook]: 
jOrganizational Unit Name (eg, section) [Kitchen]: 

Common Name (e.g. server FQDN or YOUR name) [*.mage2cookbook.com]: 
[Email Address [info@mage2cookbook.com]: 


Please enter the following 'extra' attributes 
to be sent with your certificate request 

IA challenge password []: 

jAn optional company name []: 
root@mage2cookbook:/etc/ssl# I 











Check your certificate before you submit it. Run the following code to confirm 
your settings: 


openssl req -in yourname.csr -text -noout 


In this example, we used a wildcard SSL certificate. The wildcard starts with 

* , yourdomain.com. We use a wildcard to create unlimited subdomain names, 
which we will use later to create localized domain names such as de. yourdomain. 
com or fr.yourdomain.com. 


If you don't need a wildcard domain and would rather use www. yourdomain.com or 
a naked domain such as yourdomain.com, commit this in your openss1. conf file. 


3. Submit the *.csr file to your SSL provider and continue all the steps necessary. 
Depending on your provider, it can take minutes or hours. For the purpose of 
demonstration, we used https: //www.buy-certificate.com/. On this website, 
there is an option to create a 30-day free SSL certificate. The whole process takes 
two to three minutes. 
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Now let's download the ZIP file from your mail account to your Droplet and open it in 
your root directory. Unzip the yourdomain-com. zip file by running the following 
command: 


unzip mage2cookbook-com. zip 


Your ZIP contains the following files (or similar ones): 
Archive: mage2cookbook-com.zip 
inflating: mage2cookbook-com.cer 
inflating: readme.txt 

inflating: RapidSSLSHA256CA-G3.cer 
inflating: GeoTrustGlobalCA.cer 


inflating: siteseal nw4all.html 


Now we will merge the certificate and CA authority key. Use the following command 
on the shell: 
cat mage2cookbook-com.cer RapidSSLSHA256CA-G3.cer > mage2cookbook- 


com-2015.cert 


Now let's copy the mage2cookbook-com-2015.cert file to /etc/ssl/cert using 
the following command: 


cp mage2cookbook-com-2015.cert /etc/ssl/cert 


Move the generated mage2cookbook.key to /etc/ssl/private using the 
following command: (Let's assume that you are running the openssl reg 
command in the /etc/ss1 directory.) 


mv /etc/ssl/mage2cookbook.key /etc/ssl/private 


Now let's create a symbolic link of the keys. Run the following command: 


ln -s /etc/ssl/private/mage2cookbook-com.key /etc/ss1/ 
mage2cookbook-com. key 


ln -s /etc/ssl/certs/mage2cookbook-com-2015.cer /etc/ss1/ 


mage2cookbook-com.cert 


Try to list all the files in the /etc/ss1 directory using the following command. You 
should see the names of the files that we linked: 


11 /etc/ssl 


. Now let's go to the NGINX configuration directory and update default.conf in 
/etc/nginx/conf.d. Open the default. conf file and change it with the 
following settings: 


upstream fastcgi_backend { 
server 127.0.0.1:9000; 
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11. 


12. 





server { 
listen 80; 
listen 443 ssl http2; 


server name yourdomain.com; 





set S$MAGE ROOT /var/www/html; 
set SMAGE MODE developer; 


ssl_certificate /etc/ssl/yourdomain-com.cert; 
ssl_certificate key /etc/ssl/yourdomain-com.key; 


include /var/www/html/nginx.conf.sample; 


access log /var/log/nginx/access.log; 
error_log /var/log/nginx/error.1log; 


location ~ /\.ht { 
deny all; 


} 
As you can see, we created anew listen 443 ssl http2 section. Besides the 
listen section, we also created ssl_certificate and ssl certificate key. 


The http2 flag in the listen section covers the entire HTTP/2 configuration. 


Now, all you have to do is restart NGINX to use your new settings. Run the following 
command: 


service nginx restart 


Before we can test Magento in our browser, we need to flush and clean the cache. 
We also need to update Magento's configuration with the new secure URL. Run the 
following commands: 


php bin/magento setup:store-config:set --base-url-secure="https:// 
yourdomain.com/" 


php bin/magento setup:store-config:set --use-secure-admin="1" 


php bin/magento setup:store-config:set --use-secure="1" 


php bin/magento setup:static-content:deploy 
php bin/magento cache:clean 


php bin/magento cache:flush 
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Next, we go to https: //www.sslshopper.com/ssl-checker.html and 
check our setup. Commit your domain name in the box and submit. If everything is 
configured correctly, the output should look as follows: 





Server Hostname: | yourdomain.com 


(e.g. www.google.com) 


O yourdomain.com resolves to 123.456.678.0 


The certificate should be trusted by all major web browsers (all the 
correct intermediate certificates are installed). 


© The certificate was issued by GeoTrust. KLCC 
O The certificate will expire in 26 days. 


O The hostname (yourdomain.com) is correctly listed in the certificate. 


Server 
= Common name: yourdomain.com 
i) SANs: yourdomain.com 
j Valid from December 20, 2015 to January 20, 2016 
f | Serial Number: 597922 (0x91fa2) 


© Signature Algorithm: sha256WithRSAEncryption 


— | Issuer: RapidSSL SHA256 CA - G3 


Chain Common name: RapidSSL SHA256 CA - G3 
= Organization: GeoTrust Inc. 
ff \} Location: US 
| Valid from August 29, 2014 to May 20, 2022 
| J Serial Number: 146039 (0x23a77) 


Signature Algorithm: sha256WithRSAEncryption 
Issuer: GeoTrust Global CA 


13. Congratulations, you just finished configuring HTTP/2 with Magento 2. To test your 
HTTP/2 protocol, go to https: //tools.keycdn.com/http2-test and submit 
yourdomain.com. 


Let's recap and find out what we did throughout this recipe. In steps 1 through 13, we created 
an SSL certificate, which we need to configure HTTP/2 in NGINX. 











In step 1, we configured the openss1. conf file with our domain and business data. 
In step 2, we created a certificate request that we will be sending to the SSL provider. 


In step 4, we downloaded the provided certificate file and unzipped the content. In step 6, we 
merged the domain certificate and certificate authority file into a single one. This file was then 
copied to the SSL directory. 





[147] 
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In step 6, we copied the private key to the SSL private directory before we started creating a 
symlink of the private key and merge certificate in the /etc/ss1 directory. The main reason 
why we stored the files in the private and cert directory is maintenance. When replacing or 
updating keys or certificates in the future, we only need to create a new symlink while our 
NGINX or Apache configuration can stay the same. 


In step 10, we updated the NGINX configuration and added the ssl_certificate 
parameter including the correct SSL directory. In the listen parameter, we added 
the http2 flag behind the 443 ss1 flag and restarted the NGINX server. 


In step 12, we configured the HTTPS domains using the bin/magento setup: store- 
config: set option. 


Setting up Magento 2 including SSL and HTTP/2 is pretty straightforward. However, by default, 
the only URLs that serve HTTPS are customer/account/login/, customer/account/ 
create/, checkout/, checkout/cart/, contact/,and sales/guest/form/. 
Currently, it's mandatory to have a full HTTPS website (Google: HTTPS as a ranking signal). 


It is easy to update the Magento configuration to serve every URL on HTTPS using the 
following command: 


php bin/magento setup:store-config:set --base-url="https://yourdomain. 
com/" 

php bin/magento setup:static-content: deploy 

php bin/magento cache:clean 


php bin/magento cache:flush 


x When using Varnish in your setup, make sure to offload your SSL. Varnish 
Q does not support SSL. The best common setup is NGINX as an SSL Proxy on 
the frontend, rather than Varnish, and in the backend, NGINX or Apache. 





Configuring Magento 2 performance testing 


Performance, performance, performance! This may be one of the most used words in the 
Magento 1 period. Every Magento website benefits from a great performing platform, and 
every customer loves it. 


However, before we can create a great performing website, all sorts of elements have to be 
conquered. One of the missing elements in Magento 1 was creating sample data based on 
a company profile. As every Magento website is unique, so is performance testing based on 
their profile. Some companies have only one website, store catalog, and store view. Others 

have 800 websites and are converting one million orders per day. 
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Magento 2 now provides us with the option to run a profile that creates sample data based on 
your company profile. By default, there are four sample data profiles. Depending on the profile, 
creating the sample data may take a long time, so keep this in mind. 


After creating the sample data based on your profile, you can start doing performance-based 
testing. Based on this profile, you may need to scale up or tune one of the components before 
going into production. 


Getting ready 


For this recipe, we will use a Droplet created in Chapter 2, Magento 2 System Tools, at 
DigitalOcean, https: //www.digitalocean.com/. We will be using NGINX, PHP-FPM, and 
a Composer-based setup including Magento 2 (without sample data). No other prerequisites 
are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to run a Magento 2 performance 
test. The following steps will guide you through this: 


1. Before we can start generating a profile, we need a clean setup. Run the following 
command to start with a clean Magento 2 instance: 
rm -rf * /var/www/html 
composer create-project --repository-url=https://repo.magento.com/ 
magento/project-community-edition /var/www/html --prefer-dist 


chown -R www-data:www-data /var/www/html 


2. Now let's install Magento 2 without sample data. Run the following command. We will 
be using the same procedure as we used in Installing Magento 2 sample data via the 
command line recipe of Chapter 2, Magento 2 System Tools: 


bin/magento setup:install \ 
--db-host=localhost \ 
--db-name=<your-db-name> \ 
--db-user="<db-users>" \ 
--db-password="<db-password>" \ 
--backend-frontname=<admin-path> \ 
--base-url=http://yourdomain.com/ \ 
--admin-lastname=<your-lastname> \ 
--admin-firstname=<your-firstname> \ 
--admin-email=<your-email> \ 
--admin-user=<your-admin-user> \ 
--admin-password=<your-password> \ 
--use-rewrites=1 \ 
--cleanup-database \ 
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3. After completing the install via the shell, we need to compile our code before we can 
start using it. Run the following command on the shell: 


php bin/magento setup:di:compile-multi-tenant 


chown -R www-data:www-data /var/www/html 


4. Check in your browser whether everything is working correctly before starting the 
small data profile. We use the small data profile because it does not take too long to 
run. Run the following command: 


php bin/magento setup:perf:generate-fixtures /var/www/html/setup/ 
performance-toolkit/profiles/ce/small.xml 


5. All data profiles are located in the setup/performance-toolkit/profiles/ 
directory. Depending on whether you are running CE or EE, you need to choose 
one of the subdirectories. 


6. Depending on the profile that you ran, the output looks as follows: 


BP Se x™ 
jroot@webi:/var/www/html# php bin/magento setup:performance:generate-fix ^ 
|Generating profile with following params: 

|- Websites: i 

l- Store Groups: 1 

|- Store Views: 1 

l- Categories: 30 

l- Simple products: 800 

l- Configurable products: 50 

l- Customers: 20 

l- Cart Price Rules: 10 

l- Catalog Price Rules: 10 





l- Orders: 80 
Generating websites, stores and store views... done in 00:00:00 
Generating categories... done in 00:00:03 
Generating simple products... done in 00:00:08 
Generating configurable EAV variations... done in 00:00:00 
Generating configurable products... done in 00:00:04 
Generating customers... done in 00:00:00 
Generating Cart Price Rules... done in 00:00:00 
Generating catalog price rules... done in 00:00:04 
Generating tax rates... done in 00:03:44 
Generating orders... done in 00:00:05 
Config Changes... done in 00:00:00 


Indexers Mode Changes... done in 00:00:01 

(Customer Grid index has been rebuilt successfully in 00:00:00 
Category Products index has been rebuilt successfully in 00:00:00 
Product Categories index has been rebuilt successfully in 00:00:00 
Product Price index has been rebuilt successfully in 00:00:00 
Product EAV index has been rebuilt successfully in 00:00:00 

Stock index has been rebuilt successfully in 00:00:00 

Catalog Rule Product index has been rebuilt successfully in 00:00:14 
Catalog Product Rule index has been rebuilt successfully in 00:00:14 
Catalog Search index has been rebuilt successfully in 00:00:00 

Total execution time: 00:04:49 l 
rootêweb1:/var/www/html# fj v 




















Chapter 3 


Now you can open a browser and surf to yourdomain.com, and check whether 
everything is correct. You can also log in to the backend of your Magento website 
and check all the created settings. 


Congratulations, you just finished creating profiles for performance testing with 
Magento 2. Now you can choose your favorite performance test tool and test 


your server: 





Default welcome msg! Signin or Create an Account USD -US Dollar v =| 


© Luma w 

Category 1 Category 7 Category 13 Category 19 Category 25 Category 31 

Category 37 Category 43 Category 49 Category 55 Category 61 Category 67 

Category 73 Category 79 Category 85 Category 91 Category 97 Category 103 

Category 109 Category 115 Category 121 Category 127 Category 133 

Category 139 Category 145 Category 151 Category 157 Category 163 

Category 169 Category 175 Category 181 Category 187 Category 193 

Category 199 Category 177 Category 217 Category 223 

Category 229 Category 235 Category 241 Category 247 Category 253 

Category 259 Category 265 Category 271 Category 277 Category 283 

Category 289 Category 295 

Home 

Filter ss EZŠ 56 items SorttBy Name v 4 

Category 

Category 297 56 

Compare 

Products 

You have no items 

to compare. 

My Wish List Configurable Product 147 Configurable Product 447 Configurable Product 747 
$10.00 $10.00 $10.00 
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Let's recap and find out what we did throughout this recipe. In steps 1 through 8, we created 
sample data to test the performance of the Magento 2 website. 


In steps 1 and 2, we started with a clean Magento 2 setup using Composer and 
bin/magento setup:install. 


In step 3, we needed to compile our Magento code base before we could input the 
sample data. 


In step 4, we ran a generated fixture profile using the bin/magento setup:perf option. 
Depending on the profile, Magento will start creating all of the required data. Running a large 
profile set can take up to several hours. Adjusting the profile is self-explanatory. 


If the default profile does not fit your needs, you can create a custom profile. For example, 
copy the smal1.xm1 file to mycustom. xml in the same directory and open the file in your 
favorite editor. Run the following command on the shell: 


cd /var/www/html/setup/performance-toolkit/profiles/ce/small.xml 


cp small.xml mycustom.xml 


vi mycustom.xml 


Now you can change data such as websites, store_groups, store _ views, simple _ 
products, configurable products, categories, categories nesting level, 
catalog price rules, catalog target_rules, cart_price_ rules, cart_price_ 
rules floor, customers, tax_rates_ file, and orders: 
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p cary 





B2xnl version="1.0"?> 
<!-- 
{[** 

* Copyright © 2015 Magento. All rights reserved. 

* See COPYING.txt for license details. 

*/ 
--> 
<config> 

<profile> 
<websites>1</websites> <!-- Number of websites to generate -- 


<store_groups>1</store groups> <!--Number of stores--> 

<store views>1</store_views> <!-- Number of store views --> 

<simple_ products>800</simple products> <!-- Simple products c 
ount --> 

<configurable products>50</configurable products> <!--Configu 
rable products count (each configurable has 3 simple products as opti 





ons, that are not displayed individually in catalog) --> 
<categories>30</categories> <!-- Number of categories to gene 
rate --> 
<categories nesting _level>3</categories_ nesting _level> <!-- N 
esting level for categories --> 
<catalog price rules>10</catalog price rules> <!-- Number os 
catalog price rules --> | 
<cart_price_rules>10</cart_price_rules> <!-- Number of cart p| 
rice rules --> | 
<cart_price rules floor>2</cart_price rules floor> <!-- The p 


rice rule condition: minimum products amount in shopping cart for pri 
ce rule to be applied --> 








<customers>20</customers> <!-- Number of customers to generat 
e --> 
<tax_rates file>tax_rates.csv</tax_rates_ file> <!-- Tax rates 
file in fixtures directory--> 
<orders>80</orders> <!-- Orders count --> 
n eS Top 


m 














Save your file, and use the following command: 


:wq 


Now we can run the mycustom. xml file with the following command: 


php bin/magento setup:perf:generate-fixtures /var/www/html/setup/ 
performance-toolkit/profiles/ce/mycustom.xml 


A Running the profile can take some time. Be aware to adjust your 
Q server setup accordingly. An extra large profile can take up to a 
couple of hours to create. 


Before we start, you need to check whether your setup is clean. Otherwise, start with step 1 of 
the recipe. 








Creating Catalogs and 
Categories 


In this chapter, we will cover the basic tasks related to creating a catalog and products in 
Magento 2. You will learn how to: 


> 


> 


> 


> 


> 


Create a Root Catalog 

Create subcategories 

Manage attribute sets 

Create products 

Manage products in a catalog grid 


Introduction 


This chapter explains how to set up a vanilla Magento 2 store. If Magento 2 is totally new 
to you, then lots of new basic whereabouts are pointed out. Are you currently working with 
Magento 1? If so, not much has changed since then. 
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The new backend of Magento 2 is the biggest improvement of them all. The design is built 
responsively and has a great user experience. Compared to Magento 1, this is a great 
improvement. The menu is located vertically on the left of the screen and works great on 
desktop and mobile environments: 

















Dashboard Q a AL admin ~ 
@ 
DASHBOARD z 
Store View: All Store Views v Qe Reload Data 
Lifetime Sales 
$0 00 Orders Amounts 
Last 24 Hours s. 
Average Order 
$0.00 No Data Found 
Last Orders Revenue Tax Shipping Quantity 
We couldn't find any records. $0.00 $0.00 $0.00 0 
Last Search Terms 
We couldn't find any records. 
Bestsellers Most Viewed Products New Customers Customers 
Top Search Terms 
We couldn't find any records i 
We couldn't find any records. 
f Copyright© 2016 Magento Commerce Inc. All rights reserved Magento ver 
Report Bugs 





Within this chapter, we will learn how to set up a website with multiple domains using different 
catalogs and products. Depending on the website, store, and store view setup, we can create 
different subcategories, URLs, and products for any domain name. 


There are a number of different ways customers can browse your store, but one of the most 
effective is layered navigation. Layered navigation is located in your catalog and holds 
product features to sort or filter. We will learn how to create product attributes for use in 
layered navigation. 


Every website benefits from great search engine optimization (SEO). We will learn how to 
define catalog URLs for catalogs. 


Without products, the most important element of the website is missing. We will be creating 
different types of product in our multi-website setup. 


st Throughout this chapter we will cover the basics of how to set up 


a multi-domain setup. Additional tasks required to complete a 
production setup are beyond the scope of this chapter. 
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Create a Root Catalog 


The first thing we need to do when setting up a vanilla Magento 2 website is define our 
website, store, and store view structure. 





So what is the difference between website, store, and store view, and why is it important? 


>» Website is the top-level container and the most important of the three. It is the parent 
level of the entire store and used, for example, to define domain names, different 
shipping methods, payment options, customers, orders, and so on. 


» Stores can be used to define, for example, different store views with the same 
information. A store is always connected to a Root Catalog that holds all the 
categories and subcategories. One website can manage multiple stores, but every 
store has a different Root Catalog. When using multiple stores, it is not possible to 
share one basket. The main reason for this has to do with the configuration setup, 
where shipping, catalog, customer, inventory, taxes, and payment settings are not 
shareable between different sites. 


>» Store view is the lowest level and mostly used to handle different localizations. 
Every store view can have a different language. Besides using store views just for 
localizations, they can also be used for Business to Business (B2B), hidden private 
sales pages (with noindex and nofollow), and so on. The option where we use the 
Base Link URL, for example, (vourdomain.com/myhiddenpage) is easy to set up. 


The website, store, and store view structure is shown in the following image: 





web site 


yourdomain.de 


web site 


yourdomain.com 


store 


ROOT catalog DE 


store 


ROOT catalog EN f 





store view] 


german f 
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Getting ready 


To step through this recipe, you will use a Droplet created in Chapter 2, Magento 2 System 
Tools, at DigitalOcean (https: //www.digitalocean.com/). We will be using an NGINX, 
PHP-FPM, Composer-based setup with Magento 2 preinstalled. No other prerequisites 

are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to create a multi-website setup 
including three domains (yourdomain.com, yourdomain.de, and yourdomain. fr) and 
separated Root Catalogs. The following steps will guide you through this: 


1. 


First we need to update our NGINX. We need to configure the additional domains 
before we can connect them to Magento. Make sure that all domain names are 
connected to your server and DNS is configured correctly. 


Go to /etc/nginx/conf.d, open the default .conf file, and include the following 
content at the top of your file: 


map $http_ host $magecode { 
hostnames; 
default base; 
yourdomain.de de; 
yourdomain.fr fr; 


} 


Your configuration should look like this now: 


map $http_host $magecode { 
hostnames; 
default base; 
yourdomain.de de; 
yourdomain.fr fr; 


} 


upstream fastcgi_backend { 
server 127.0.0.1:9000; 


} 


server { 
listen 80; 
listen 443 ssl http2; 


server name yourdomain.com; 


set S$MAGE ROOT /var/www/html; 
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set SMAGE MODE developer; 


ssl_certificate /etc/ssl/yourdomain-com.cert; 
ssl_certificate key /etc/ssl/yourdomain-com.key; 


include /var/www/html/nginx.conf.sample; 


access log /var/log/nginx/access.log; 
error_log /var/log/nginx/error.1log; 


location ~ /\.ht { 
deny all; 


} 


Now let's go to the Magento 2 configuration file in /var/www/html1/ and open the 
nginx.conf.samp1e file. Go to the bottom and look for: 


location ~ (index|get|static|report |404|503)\.phps 


Now we add the following lines to the file under fastcgi_ pass fastcgi_ 
backend;: 


fastcgi_param MAGE RUN _TYPE website; 
fastcgi_param MAGE RUN _CODE $magecode; 


Your configuration should look like this now (this is only a small section of the bottom): 


location ~ (index|get|static|report|404|503)\.phps { 
try files Suri =404; 
fastcgi_pass fastcgi_ backend; 


fastcgi_param MAGE RUN _TYPE website; 
fastcgi_param MAGE RUN_CODE $magecode; 


fastcgi_param PHP FLAG "session.auto_start=off \n 
suhosin.session.cryptua=off"; 

fastcgi_param PHP VALUE "memory _limit=256M \n 
max_execution_time=600"; 

fastcgi_read_timeout 600s; 

fastcgi_connect_timeout 600s; 

fastcgi_param MAGE MODE SMAGE MODE; 


fastcgi_index index.php; 
fastcgi_param SCRIPT_FILENAME 
Sdocument_root$fastcgi_script_name; 





include fastcgi_ params; 
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The current setup uses the MAGE RUN TYPE website variable. You may change 
website to store, depending on your setup preferences. When changing the 
variable, you need your default .conf mapping codes as well. 


5. Now all you have to do is restart NGINX and PHP-FPM to use your new settings. Run 
the following command: 


service nginx restart && service php-fpm restart 


6. Before we continue, we need to check if our web server is serving the correct codes. 
Run the following command in the Magento 2 web directory: 


var/www/html1/pub 
echo "<?php header ("Content-type: text/plain"); print _r($ SERVER) ; 


?>" > magecode.php 


Don't forget to update your nginx. conf . sample file with the new magecode code. 
It's located on the bottom of your file and should look like this: 
location ~ (index|get|static|report|404|503|magecode)\.phps { 


Restart NGINX and open the file in your browser. The output should look as follows. 
As you can see, the created MAGE_RUN variables are available: 





Array Array Array 


( 


( ( 
[USER] => app [USER] => app [USER] => app 
[HOME] => /home/app [HOME] => /home/app [HOME] => /home/app 





[PHP_FLAG] => session.auto_start=off [PHP_FLAG] => session.auto_start=off [PHP_FLAG] => session.auto_start=off 
suhosin. session. cryptua=off suhosin.session.cryptua=off suhosin.session. cryptua=off 

[PHP_VALUE] => memory_limit=256M [PHP_VALUE] => memory_limit=256M [PHP_VALUE] => memory_limit=256M 
max_execution_time=600 max_execution_time=600 | max_execution_time=600 

[MAGE_MODE] => developer [MAGE_MODE] => developer [MAGE_MODE] => developer 








7. Congratulations, you just finished configuring NGINX including additional domains. 
Now let's continue connecting them in Magento 2. 


8. Login to the backend and go to Stores | All Stores. By default, Magento 2 has one 
Website, Store, and Store View setup. Now click on Create Website and commit the 
following details: 





Name My German Website 
Code de 

















Next, click on Create Store and commit the following details: 




















Website My German Website 
Name My German Website 
Root Category Default Category (we will change this later) 
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Next, click on Create Store View and commit the following details: 











Store My German Website 
Name German 

Code de 

Status Enabled 











Repeat the same steps for the French domain. Make sure that the Code in Website 
and Store View is fr. 


9. The next important step is to connect the websites with the domain name. Go to 
Stores | Configuration | Web | Base URLs. Change the Store View scope at the top 
to My German Website. You will be prompted when switching; press OK to continue. 
Now uncheck the checkbox called Use Default from the Base URL and Base Link 
URL fields and commit your domain name. Now click Save Config and continue the 
same procedure for the other website. The output should look like this: 








Store View: | My German Website v Q Save Config 


GENERAL 


General 


Web 


Design 


Currency Setup 


Store Email 
Addresses 


Search Engine Optimization (© 


Base URLs 


Any of the fields allow fully qualified URLs that end with '/' (slash) e.g. http://example.com/magento/| 


Specify URL or {{base_url}} placeholder. Default 


May start with {{unsecure_base_url}} 


placeholder. Default 








10. Save your entire configuration and clear your cache. Now go to Products | 
Categories and click on Add Root Category with the following data: 

















Name Root German 
Is Active Yes 
Page Title My German Website 
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Perform the same steps for the French domain. You may add additional information 
here but it is not needed. Changing the current Root Category called Default 
Category to Root English is also optional but advised. 


Save your configuration and go to Stores | All Stores and change all of the stores to 
the appropriate Root Catalog we just created. Every Root Category should now have a 
dedicated Root Catalog. 


11. Congratulations, you just finished configuring Magento 2 including additional domains 
and dedicated Root Categories. Now let's open up a browser and surf to the domain 
names you created: yourdomain.com, yourdomain.de, and yourdomain. fr. 


Let's recap and find out what we did throughout this recipe. In steps 1 through 11, we created 
a multi-store setup for .com, .de, and . fr domains using a separate Root Catalog. 


In steps 1 through 4, we configured the domain mapping in the NGINX default. conf file. 
Then we added the fastcgi_param MAGE RUN code to the nginx. conf .samp1e file; this 
will manage which website or store view to request within Magento. 


In step 6, we used an easy test method to check if all domains run the correct MAGE_RUN code. 


In steps 7 through 9, we configure the website, store, and store view names and codes for the 
given domain names. 


In step 10, we created additional Root Catalogs for the remaining German and French stores. 
They are then connected to the previously created store configuration. All stores have their 
own Root Catalog now. 


Are you able to buy additional domain names, but would like to try setting up a multi-store? 
Here are some tips to create one. Depending on whether you are using Windows, Mac OS, or 
Linux, the following options apply: 


>» Windows: Go to C: \Windows\System32\drivers\etc and open up the 
hosts file as an administrator. Add the following (change the IP and domain 
name accordingly): 


123.456.789.0 yourdomain.de 
123.456.789.0 yourdomain.fr 
123.456.789.0 www. yourdomain.de 
123.456.789.0 www. yourdomain.fr 
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Save the file and click on the Start button. Search then for cmd. exe and commit 
the following: 


ipconfig /flushdns 


» Mac OS: Goto the /etc/ directory, open up the hosts file as a superuser, and add 
the following (change the IP and domain name accordingly): 


123.456.789.0 yourdomain.de 
123.456.789.0 yourdomain.fr 
123.456.789.0 www. yourdomain.de 
123.456.789.0 www. yourdomain.fr 


Save the file and run the following command on the shell: 


dscacheutil -flushcache 


Depending on your Mac version, check out the different commands here: 
http: //www.hongkiat .com/blog/how-to-clear-flush-dns-cache-in- 
os-x-yosemite/ 


» Linux: Go to the /etc/ directory, open up the hosts file as a root user, and add the 
following (change the IP and domain name accordingly): 


123.456.789. 
123.456.789. 
123.456.789. 
123.456.789. 


yourdomain.de 
yourdomain.fr 


www. yourdomain.de 


oO 0 Oo 


www. yourdomain.fr 


Save the file and run the following command on the shell: 


service nscd restart 


Depending on your Linux version, check out the different commands here: http: // 
www.cyberciti.biz/fag/rhel-debian-ubuntu-flush-clear-dns-cache/ 


Open up your browser and surf to the custom domains. 


These domains only work on your PC. You can copy these IP and 
sl i : 
` domain names on as many PC as you prefer. This method also works 
great when you are developing or testing and your production domain 
is not available on your development environment. 
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Create subcategories 


After creating the foundation of the website, we need to set up a catalog structure. Setting up 


a catalog structure is not difficult but needs to be well thought out. 


Some websites have an easy setup using two levels, while others sometimes use five or more 
subcategories. Always keep in mind user experience: your customer needs to crawl the pages 


easily. Keep it simple! The following image shows a simple catalog structure: 





Apparel Store 
Root Category 








Clothes 
Category 


Shoes 
Category 












Men 
Subcategory 


Women 
Subcategory 












Men Women 
Subcategory Subcategory 





Getting ready 


To step through this recipe, you will use a Droplet created in Chapter 2, Magento 2 System 
Tools, at DigitalOcean (https: //www.digitalocean.com/). We will be using an NGINX, 
PHP-FPM, Composer-based setup with Magento 2 preinstalled. No other prerequisites 


are required. 
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How to do it... 


For the purpose of this recipe, let's assume that we need to set up a catalog including 
subcategories. The following steps will guide you through this: 


1. First, log in to the backend of Magento 2 and then go to Products | Categories. 


Since we have already created Root Catalogs, we start with using the Root English 


catalog first. 


2. Click on the Root English catalog on the left and then select the Add Subcategory 
button above the menu. Now commit the following and repeat all steps again for the 


other Root Catalogs: 





























Name Shoes (Schuhe) (Chaussures) 
Is Active Yes 

Page Title Shoes (Schuhe) (Chaussures) 
Name Clothes (Kleider) (Vétements) 
Is Active Yes 

Page Title Clothes (Kleider) (Vétements) 








3. Since we created the first level of our catalog, we can continue with the second level. 
Now click on the first level, which you need to extend with subcategories, and select 
the Add Subcategory button. Commit the following and repeat all steps again for the 


other Root Catalogs: 























Name Men (Manner) (Hommes) 
Is Active Yes 
Page Title Men (Manner) (Hommes) 
Name Women (Frau) (Femmes) 
Is Active Yes 
Page Title Women (Frau) (Femmes) 
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4. Congratulations, you just finished configuring subcategories in Magento 2. 
Now let's open up a browser and surf to the domain names you created earlier: 
yourdomain.com, yourdomain.de, and yourdomain. fr. Your categories 
should now look as follows: 





Root English (ID: 2) 
Add Root Category 


Add Subcategory General Information Display Settings Custom Design Category Products 


Collapse All | Expand All 
© Root English (0) 

Eq Shoes (0) 

E Men (0) 

[=| Women (0) Name + | Root English 
BE Clothes (0) 
E Men (0) 
E Women (0) Is Active + | Yes v 
BE Root German (0) 

BE Schuhe (0) 
E Manner (0) Description BZ) Æ || Font Family ~ FontSize 7| A -78 ~| Æ |Z j5 | om 
E Frau (0) 
Gy Kleider (0) 
E Manner (0) 
E Frau (0) 
© [EQ Root French (0) 

a E Chaussures (0) 
E Hommes (0) 5 
E Femmes (0) WYSIWYG Editor 
aE vêtements (0) 
E Hommes (0) 
E Femmes (0) 


Let's recap and find out what we did throughout this recipe. In steps 1 through 4, we created 
subcategories for the English, German, and French stores. In this recipe, we created a 
dedicated Root Catalog for every website. This way, every store can be configured using their 
own tax and shipping rules. 


In our example, we only submitted Name, Is Active, and Page Title. You may continue to 
commit the Description, Image, Meta Keywords, and Meta Description fields. By default, 
the URL key is similar to the Name field; you can change this depending on your SEO needs. 











Image | Bestand kiezen | Geen bestand gekozen 





Every category or subcategory has a default page layout defined by the theme. You may need 
to override this. Go to the Custom Design tab and click the Page Layout drop-down menu. We 
can choose from the following options: 1 column, 2 columns with left bar, 2 columns with 
right bar, 3 columns, and Empty layout. 
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Manage attribute sets 


Every product has a unique DNA; some, such as shoes, could have different colors, brands, 
and sizes, while a Snowboard could have weight, length, torsion, manufacturer, and style. 





Setting up a website with all the attributes does not make sense. Depending on the products 
you sell, you should create attributes specific to each website. 


When creating products for your website, attributes are the key element and need to 

be thought through. What and how many attributes do you need? And how many values 

do you need? These are all types of question that could have a great impact on your website; 
and don't forget performance. Creating an attribute such as color and having 100,000 of 
different key values stored will not improve your overall speed and user experience. Always 
think things through. 


After creating the attributes, we combine them in attribute sets, which can be picked when 
starting to create a product. Some attributes can be used more than once, while others are 
unique to one product or attribute set. 


Getting ready 


To step through this recipe, you will use a Droplet created in Chapter 2, Magento 2 System 
Tools, at DigitalOcean (https: //www.digitalocean.com/). We will be using an NGINX, 
PHP-FPM, Composer-based setup with Magento 2 preinstalled. No other prerequisites 

are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to create product attributes and 
sets. The following steps will guide you through them: 


1. First, log in to the backend of Magento 2 and go to Stores | Products. 


Since we are using a vanilla setup, only system attributes and one attribute set are 
installed. Now click on Add New Attribute and commit the following data in the 
Properties tab: 

















Attribute Properties 

Default label shoe_size 
Catalog Input Type for Store Owners Drop-down 
Values Required No 
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Manage Options (values of your attribute) 

English Admin French German 
4 4 35 35 
4.5 4.5 35 35 

5 5 35-36 35-36 
5.5 5.5 36 36 

6 6 36-37 36-37 
6.5 6.5 37 37 

7 7 37-38 37-38 
7.5 7.5 38 38 

8 8 38-39 38-39 
8.5 8.5 39 39 
Advanced Attribute Properties 

Scope Global 

Unique Value No 

Add to Column Options Yes 

Use in Filer Options Yes 








= Since we have already set up a multi-website selling shoes and clothes, 
& we will stick with this. The attributes we need for selling shoes are: 
shoe_size, shoe_ type, width, color, gender, and occasion. 


Continue the rest of the chart accordingly (http://www. shoesizingcharts.com). 


2. Click on Save and Continue Edit now and continue on the Manage Labels tab with 
the following information: 





Manage Titles (Size, Color, and so on) 





English French German 
Size Taille Größe 




















3. Click on Save and Continue Edit now and continue on the Storefront Properties tab 
with the following information: 























Storefront Properties 

Use in Search No 

Comparable in Storefront No 

Use in Layered Navigation Filterable (with result) 
Use in Search Result Layered Navigation No 











Storefront Properties 


























Position (0) 

Use for Promo Rule Conditions No 
Allow HTML Tags on Storefront Yes 
Visible on Catalog Pages on Storefront Yes 
Used in Product Listing No 
Used for Sorting in Product Listing No 
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Click on Save Attribute now and clear the cache. Depending on whether you set up 
index management accordingly through the Magento 2 cronjob, it will automatically 


update the newly created attribute. 


The configuration for the additional shoe_type, width, color, gender, 
and occasion attributes can be downloaded at https ://github.com/ 


mage2cookbook/chapter4 


After creating all of the attributes, we combine them in an attribute set called Shoes. 
Go to Stores | Attribute Set, click Add Attribute Set, and commit the following data: 





Edit Attribute Set Name 





Name 


Shoes 





Based On 








Default 








Now click in the Groups section, click on the Add New button, and commit the group 


name called Shoes. 


The newly created group is now located at the bottom of the list. You may need to 
scroll down before you see it. It is possible to drag and drop the group higher up in 


the list. 


Now drag and drop the created shoe_size, shoe_type, width, color, gender, 
and occasion attributes in the group and save the configuration. The cronjob 


notice is automatically updated, depending on your settings. 
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10. Congratulations, you just finished creating attributes and attribute sets in Magento 2. 
These can be seen in the following screenshot: 





Edit Attribute Set Name Groups Unassigned Attributes 
p 
Name +| Shoes Add New Delete Selected Group | manufacturer 
For internal use Double click on a group to rename it. 
J custom_design_to z 
E custom_layout_update 
=] page_layout 


J options_container 
oB} Autosettings 
Eg short_description 
Egvisibility 
E news_from_date 
= news_to_date 
J country_of_manufacture 
Eggift_message_available 
=) gift_wrapping_available 
=) gift_wrapping_price 





= is_returnable 














Let's recap and find out what we did throughout this recipe. In steps 1 through 10, we created 
attributes that will be used in an attribute set. The attributes and sets are the fundamentals 
for every website. 


In steps 1 through 5, we created multiple attributes to define all details about the shoes and 
clothes we would like to sell. Some attributes are later used as configurable values on the 
frontend while others only indicate the gender or occasion. 


In steps 6 through 9, we connect the attributes to the related attribute set. Thus, when 
creating a product, all the correct elements are available. 


There's more... 


After creating the Shoe attribute set, continue by creating an attribute set for Clothes. 


Use the following attributes to create the set: color, occasion, apparel type, sleeve __ 
length, fit, size, length, and gender. 
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Follow the same steps we performed before to create a new attribute set. You may reuse the 
color, occasion, and gender attributes. Details of all the attributes can be found here: 


https://github.com/mage2cookbook/chapter4#clothes-set. 


The following screenshot shows the Clothes attribute set: 





Name +| Clothes 


For internal use 








Edit Attribute Set Name Groups Unassigned Attributes 
Add New Delete Selected Group | manufacturer 


Double click on a group to rename it. 


=] page_layout 
E] options_container 






= short_description 

Eg visibility 

E news_from_date 

E news_to_date 

J country_of_manufacture 
Eg gift_message_available 
= gift_wrapping_available 
gift_wrapping_price 
returnable 














hoe_size 











Create products 


Eventually, after creating attributes and sets, it comes down to adding products. Magento 2 
uses the same types of product as Magento 1. This also includes Magento 2 Enterprise. 


The product types we can choose from are: Simple Product, Configurable Product, Grouped 
Product, Virtual Product, Bundle Product, Downloadable Product, and, for the Enterprise 


Edition (EE), Gift Card. 


Depending on the products you would like to sell, you may use one or two of the types. The 
most used types are Simple and Configurable Products because they rely on one another 


when you sell shoes, for example. 
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Product type definitions are as follows: 


> 


Simple Product: A Simple Product in Magento is a physical product. There are 
no options such as size or color that the end user can pick during the order. One 
example of a Simple Product type is a broom or umbrella. 


Configurable Product: A combination of Simple Products organized with different 
colors, sizes, or other attributes is called a Configurable Product. One example of a 
Configurable Product is a shoe or shirt. 


Grouped Product: A Grouped Product is a collection of Simple Products related to 
one another. Each Simple Product could be sold separately, but is cheaper as a set. 
One example of a Grouped Product is a camera plus a photo bag and memory card. 
This set might offer a special price. 


Virtual Product: A Virtual Product is a non-physical product. One example of a Virtual 
Product is a service warranty for your computer or a membership. 


Bundle Product: A Bundle Product is an extension of a Grouped Product. A Grouped 
Product does not have the option to configure different choices. But this can be 
managed using a Bundle Product. One example of a Bundle Product is a building a 
computer; a customer can choose from a set of different hard disks, monitors, CPUs, 
memory, and so on. 


Downloadable Product: A Downloadable Product is a non-physical product. One 
example of a Downloadable Product is software or an eBook; you can download 
them online. 


Gift Card (EE only): A Gift Card can be a physical, virtual, or combined product. This is 
used as a store credit and can be sold as a gift. 


Besides the regular ones, it is possible you may need extra options, depending on your 
product base. In Magento 1, additional third-party modules, such as Configurable Bundles, 
Events, Training, Rental, and Recurring, could be bought and installed to manage this. 


Using product types is now easier than ever. Magento 2 created a user-friendly flow for 
configuring Configurable Products on the fly. 


Getting ready 


To step through this recipe, you will use a Droplet created in Chapter 2, Magento 2 System 
Tools, at DigitalOcean (https: //www.digitalocean.com/). We will be using an NGINX, 
PHP-FPM, Composer-based setup with a single Magento 2 website, Root Catalog, store view, 
categories, and attributes preinstalled. No other prerequisites are required. 








How to do it... 
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For the purpose of this recipe, let's assume that we need to create Configurable Product for 
Magento 2. The following steps will guide you through them: 


1. First, log in to the backend of Magento 2 and go to Products | Catalog. Click on the 
Add Product button and continue with the following information: 





Product Details 














Name Ellis Flat 

SKU shw005 

Price 250.00 

Tax Class Taxable Goods 





Images and Videos 


Download the images here: https: //github.com/ 
mage2cookbook/chapter4 

















Quantity 100 

Weight Yes 

Categories Shoes 

Description Suede upper. Rubber 0.5" heel. Domestic. 








2. Now hit the Save button. As you can see, you stay in the same screen while your data 
is being saved. When you want to Save & Close then choose from the drop-down 


arrow and continue. 


3. Open a new tab in your browser, click the drop-down arrow in the top-right corner, and 
choose Customer View. This trick will open up a new tab and launch your home page. 


4. Go to your Shoes menu and the newly created product should be visible. In some 
situations, it is best to clear your cache first if you are having issues. 
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5. Congratulations, you just finished creating a Simple Product in Magento 2. 


Now let's go back to our backend and open up the newly created product. Next we are 
going to set our attribute set we created earlier in this chapter. This option is located 
above the Product Details title. Here we choose the Shoes attribute set, as shown in 


the following screenshot: 





Default 
| 


Product Details Pr 


BASIC SETTINGS 


Clothes 


Images and Videos Shoes 


Show all... 


Search Engine 


Optimization 
SKU + 


Websites 


ADVANCED SETTINGS Vv 
Tax Class Taxable Goods v 











6. After choosing the option, you will see that Magento 2 has loaded a new menu called 
Shoes under the Search Engine Optimization menu. 


7. Next scroll to the bottom and open up the Configurations drop-down menu. Click the 
Create Configurations button. This is shown in the following screenshot: 





Downloadable Information 


Configurations 


Configurable products allow customers to choose options (Ex: shirt Create Configurations 


color). You need to create a simple product for each configuration 
(Ex: a product for each color). 
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8. Next we will use one of the brand new features of Magento 2. This workflow 
helps to create Configurable Product on the fly. Depending on the attributes, 
the list of attributes could be long. For now, we pick the shoe_size option. 
Continue to the next step by hitting the Next button in the top-right corner, 
as shown in the following screenshot: 





Create Product Configurations x 


e When you remove or add an attribute, we automatically update all configurations and you will need to manually recreate the 


current configurations. 
Select Attributes Attribute Values Bulk Images & Summary 


Price 
Step 1: Select Attributes 
Selected Attributes: Size 


Y Filters © Default View v % Columns v 


10 records found (1 selected) 20 v | per page 1 of 1 








BE Usein Layered Navigation Attribute Code | Attribute Label Required Visible | Scope Searchable Comparable 
Filterable (with results) apparel_type apparel_type Yes Yes Yes Globa Yes Yes 
Filterable (with results) color Color No Yes Yes Globa Yes Yes 
Filterable (with results) fit fit No Yes Yes Globa Yes No 
No gender gender No Yes Yes Global Yes No 
Filterable (with results) length length No Yes Yes Globa Yes No 
Filterable (with results) occasion occasion No Yes Yes Global Yes Yes 

v Filterable (with results) shoe_size shoe_size No Yes Yes Globa No No 
Filterable (with results) shoe_type shoe_type Yes Yes Yes Global Yes No 
Filterable (with results) size size No Yes Yes Globa Yes No 
Filterable (with results) sleeve_length sleeve_length No Yes Yes Globa Yes No 
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9. A list shows all the attribute values we created earlier. Click Select All and continue 
to the next step, as shown in the following screenshot: 





Create Product Configurations x 
O0 
Cancel Back 
Select Attributes Attribute Values Bulk Images & Summary 
Price 


Step 2: Attribute Values 


Select values from each attribute to include in this product. Each unique combination of values creates a unigue product SKU. 


shoe_size (8 Options) Select All Deselect Al 
7 4 7| 4.5 vs 
v| 5.5 v| 6 v| 6.5 
47 v| 7.5 


Create New Value 











10. Step 3: Bulk Images, Price, and Quantity to create a Configurable Product is an 
important step. Commit a price and quantity here, otherwise the product will not 
show up on the screen (adjusting the value later is straightforward using the same 
flow). Select Apply single price to all SKUs and Apply single quantity to each SKU 
and fill in 250 for the Price and 100 for the Quantity. Continue to the next step, as 
shown in the following screenshot: 





Create Product Configurations 


@ Choose this option to delete and replace extension data for all past configurations. 


Step 3: Bulk Images, Price, and Quantity 


Quantity + 
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11. Depending on the values in the attribute list, Associated Products are created. Now 
click the Generate Products button and all of them are created, as shown in the 
following screenshot: 








Create Product Configurations x 
a ew) 
Select Attributes Attribute Values Bulk Images & Summary 
Price 


Step 4: Summary 


Associated Products © 


You created these products for this configuration. 


Images SKU Quantity shoe _size Price 
shw005-4 100 4 $250 
shw005-4.5 100 45 $250 

©) shwoos-5 100 5 $250 
shw005-5.5 100 5.5 $250 
©) shwoos-6 100 6 $250 
2) shwo05-6.5 100 6.5 $250 
9). shwoos-7 100 7 $250 
shw005-7.5 100 75 $250 
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12. Now save the new setup and check in your browser; the result should be as shown in 
the following screenshot: 





Shoes Clothes 


Home 


Ellis Flat 


Be the first to review this product 


$250.00 IN STOCK 


SKU#: shw005 


Size * 


Choose an Option... v 


Qty 


1 


“a 


W WISH LIST „la COMPARE 


4 


Details More Information Reviews 


Suede upper. Rubber 0.5" heel. Domestic. 











13. Congratulations, you just finished creating a Configurable Product in Magento 2. 


14. Now go to https ://github.com/mage2cookbook/chapter4#creating- 
products and continue to the rest of the Shoes and Clothes products. After 
creating a minimum of two products, our catalog navigation filter (layered navigation) 
pops up and looks like this: 
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© Luma 


Shoes Clothes 


Home 


Shoes 


iv) You added product Ellis Flat to the comparison list. 


Shopping Options š E5 2 Items 
PRICE ee 
COLOR v 
SHOE TYPE v 


OCCASION {v | 


Compare Products 2 items 





x Ellis Flat 


< Broadway Pump Ellis Flat Broadway Pump 


Compare | Clear All $250.00 $410.00 


Let's recap and find out what we did throughout this recipe. In steps 1 through 13, we created 
a Configurable Product using the new Magento workflow. 











In steps 1 through 4, we created a Simple Product and connected it to the attribute set. This 
product will be the starting point for creating a Configurable Product. 


In steps 8 through 11, we used the configurations workflow to select the attributes related to 
this product and set its values. Depending on the setup, we can apply a single price, image, or 
quantity to all of the Simple Products created during this process. 
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By default, when creating a product, Magento 2 starts with a Virtual Product. When changing 
settings such as Weight (Does this have a weight?) to Yes, the product switches to a Simple 
Product. The same goes for Downloadable and Configurable Product. 





This new technique is stunning and a great benefit for store owners. Everybody can now 
create and change products on the fly. 


Bundle and Grouped Products, on the other hand, are more like Magento 1. You first need 
to choose the product type using the drop-down arrow in the Add Product button and then 
continue the same flow, as shown in the following screenshot: 


Add Product A 


Simple Product 
Configurable Product 
Grouped Product 
Virtual Product 
Bundle Product 


Downloadable 
Product 


Manage products in a catalog grid 


Managing products on a daily basis may not be one of the most entertaining tasks. The 
product grid in Magento 1 is, out of the box, not the best tool. Lots of merchants install a 
third-party extension for better use and configuration. Depending on the extension, it is 
possible to tune the grid accordingly. 











Now the new Magento 2 catalog grid is better than ever. Every backend user can create their 
own view and select the appropriate attributes for the best view ever. 


Besides all the fancy features, the product grid loads asynchronously, which means that the 
page refreshes its data in the background. This is great for performance and user experience. 
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Getting ready 


To step through this recipe, you will use a Droplet created in Chapter 2, Magento 2 System 
Tools, at DigitalOcean (https: //www.digitalocean.com/). We will be using an NGINX, 
PHP-FPM, Composer-based setup including a single Magento 2 website, Root Catalog, 
store view, categories, and attributes and four configurable products preinstalled. No other 
prerequisites are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to a create a custom product grid in 
Magento 2. The following steps will guide you through this: 


1. First, log in to the backend of Magento 2 and go to Products | Catalog. Depending 
on the previous recipe, you will have a list which looks as follows: 





Y Filters © Default view v bed Columns v 
Actions v 93 records found 20 v | per page 1 of 5 > 
Attribute z S 
EE D | Thumbnail Name Type Set SKU Price Quantity Visibility Status Websites Action 
12 Ellis Flat Configurable Shoes shw005 $250.00 : 0.0000 Catalog, Enabled | Mage2CookBook Edit 
=— Product Search EN 
13 shw005- Virtual Shoes shw005- $250.00 100.0000 Not Visible Enabled Mage2CookBook Edit 
a Black Product Black Individually EN 
14 shw005- Virtual Shoes shw005- $250.00 ` 100.0000 : Not Visible Enabled | Mage2CookBook Edit 
>- Blue Product Blue Individually EN 
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2. Click in the top-right corner on the arrow to the right of Columns. By default, Magento 
lists 12 options. Now select URL key, and deselect the SKU, Visibility, and Websites 
checkboxes. Then point your mouse at the grid again. Be aware there is no Save 
button. The grid should look as follows: 





Y Filters © Default View v Columns a 
Actions ni 93 records found 10 out of 43 visible 
v| ID v| Thumbnail Name 
Wi D | Thumbnail Name Type 
v| Type v| Attribute Set SKU 
12 Ellis Flat Configurable “| Price v| Quantity Visibility 
Product 
v| Status Websites Short Description 
13 shw005-Black Virtual Product Special Price Special Price From... Special Price To D. 
a 
Cost Weight Meta Title 
Mata Ko ard Mata Neaccrintinn Sat Produrt ac ħa = 
14 shw005-Blue Virtual Product 
w 
Reset Cancel 
15 shw005-Brown Virtual Product 
ad 





3. Now click on the Default View button, and click Save View As.... Pick a name and 
click the right arrow to save your work. The grid view should now look like this: 





Y Filters 


© Default view a {$ Columns ~v 


Actions v 93 records found 20 x pe 


Default View > 


Save View As... 
Attribute 
Set 


Thumbnail Name 





12 Ellis Flat Configurable Shoes $250.00 0.0000 Enabled _ ellis-flat Edit 
>- Product 

13 shw005-Black Virtual Product Shoes $250.00 100.0000 Enabled shw005-black Edit 
=— 
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4. You can create as many views as necessary. Keep in mind that all created views 
only apply to the user who has created them. Currently, there is no shareable grid 
view option. 


5. If you ever need to update the status of Enabled or Disabled, go to the left drop-down 
Actions menu and choose Change status. 


6. Use the Update attributes option in the drop-down Actions menu to update one 
of the attributes. First select the products which you need to update. Then click on 
Update attributes, as shown in the following screenshot: 





Y Filters © URL Keyview v % Columns ~ 








Actions a 93 records found (7 selected) 20 v | per page 1 of5 > 





Delete 


Attribute 








nbnail Name Quantity Status URL Key Action 
Change status Set 
Update Ellis Flat Configurable Shoes $250.00 : 0.0000 Enabled © ellis-flat Edit 
attributes Product 
v] 13 shw005-Black Virtual Product Shoes $250.00 100.0000 Enabled ` shw005-black Edit 
— 
v 14 shw005-Blue Virtual Product Shoes $250.00 : 100.0000 Enabled  shw005-blue Edit 
w 











7. Next go to shoe_type, mark checkbox and select the appropriate option, and 
click Save. 


8. Congratulations, you just finished managing the product grid catalog in Magento 2. 


Let's recap and find out what we did throughout this recipe. In steps 1 through 8, we created 
a custom grid for the catalog view. You can create as many grids as you like and select your 
preferred attributes in it. Saving the new grid views is straightforward. 
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If you like managing attributes in your grid or columns, go to Stores | Product and select one 
of the attributes. In the Properties tab, look for Advanced Attribute Properties. At the bottom, 
change Add to Column Options and Use in Filter Options appropriately, as shown in the 
following screenshot: 








Advanced Attribute Properties 


Attribute Code 
This is used internally. Make sure you don't use spaces or more than 30 
symbols. 
Scope Global y 
Declare attribute value saving scope 
Unique Value No v 


Not shared with other products 


Input Validation 
for Store Owner 


Add to Column 


z Yes bi 
Options 
Select "Yes" to add this attribute to the list of column options in the product 
grid. 
Use in Filter Yes a 
Options 


Select "Yes" to add this attribute to the list of filter options in the product 
grid. 
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In this chapter, we will cover the basic tasks related to creating a catalog and products in 
Magento 2. You will learn the following: 

> Creating shipping and tax rules 

>» Managing customer groups 

>» Configuring inventories 

> Configuring currency rates 

» Managing advanced pricing 


Introduction 


Although we've created categories and products, we are not yet ready to go online. Depending 
on the country or state we live in and ship to, we have to levy additional charges such as VAT 
and shipping fees. 


These shipping fees and tax rates need to be configured correctly according to the website 
or store view. Shipping options can be straightforward from free shipping to advanced 
calculations. But keep in mind that, depending on the situation, it is not as easy as it looks 
and could take some time to set up. 


Besides shipping and tax, we should not forget the inventory. Without the correct inventory 
setup, we could create issues when it comes to stock management. Magento 2 uses the 
same inventory setup as Magento 1, and is straightforward to configure out of the box. 


Are you selling products overseas and need to use different currency rates? Magento 2 is your 
best friend. This functionality in a multi-store setup is easy to configure. 
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Some products may depend on special prices related to customer groups. Creating B2C or 
B2B groups is straightforward and can be connected to advanced pricing within the product 
types. These prices will be shown after login or store view. 


a Lots of system configuration features are basically the same as in 
Magento 1. Within this chapter we will cover the basics and show 
Magento 2-specific features when they apply. 


Creating shipping and tax rules 


The topic of shipping is so huge that you could write a book about it. The options related, for 
example, to width, length and height, breakable, edible, and so on, are endless. 


After configuring these attributes for a product, we can start relating them to our shipping 
setup and shipping vendor. Magento has a huge selection of shipping vendors to choose from. 
It's important to choose the right vendor and the correct Magento extension. This could be 
challenging. Do not immediately pick the cheapest shipping vendor. Check the quality of their 
service, their specialty when it comes to shipping your products, and their Magento extension. 


Creating the correct tax rules is not for the fainthearted. Are you in the USA, Europe, Asia, or 
somewhere else? Every country has its own tax rules. Always check with the local authorities 
to find out which rules to apply. 


Getting ready 


To step through this recipe, you will use a Droplet created in Chapter 2, Magento 2 System 
Tools at DigitalOcean https: //www.digitalocean.com/. We will be using an NGINX, 
PHP-FPM, Composer-based setup including sample data. No other prerequisites are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to create shipping and tax rules for 
the European Union. The shipping rules apply toa Table Rates setup using a local shipping 
vendor. The following steps will guide you through them. 


1. First we start setting up the shipping rates. Go to Stores | Configuration | Sales. 
We have three menus to choose from. Let's start with the Shipping Settings first. 
Click on the Menu tab. You see two drop-down menus called Origin and Shipping 
Policy Parameters. 


Now complete the entire field set related to your company. This is the starting point. 
When using the Shipping Policy, just mark it Yes and commit your policy. Here is an 
example of how a policy could look: 








Please be assured that your items will ship out within two days of 


GA 


purchase. We determine the most efficient shipping carrier for your 
order. The carriers that may be used are: TNT, DHL, United Parcel 


Service (UPS), or FedEx. Sorry but we cannot ship to P.O. Boxes. 


Chapter 5 





Origin 


Country 


Region/State 


ZIP/Postal Code 


City 


Street Address 


Street Address Line 2 


Shipping Policy Parameters 


Apply custom Shipping Policy 


Shipping Policy 





Netherlands v 


1011AC 


Amsterdam 


My Street 123 


Yes 


“Please be assured that your items will 
ship out within two days of purchase. 
We determine the most efficient 
shipping carrier for your order. The 
carriers that 

mav he used are: U.S. Postal Service 








2. Now continue to the Multishipping Settings menu. By default, we stay with the Allow 
Shipping to Multiple Addresses option. 


3. Next, we click Shipping Methods. The default shipping options in Magento 2 are: 
Free Shipping, Flat Rate, Table Rates, UPS, USPS, FedEx, and DHL. 


Since the scope of this recipe is Table Rates, using Free Shipping and Flat Rate is 


pretty straightforward. 
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Now click on the Table Rates drop-down arrow, and commit the following information: 





Table Rates 


Enabled | Yes v 


Title | Best Way STORE VIEV 


Method Name |Table Rate STORE VIEW] 


Condition | Weight vs. Destination v WEBSITE 


Include Virtual Products in Price No WEBSITE 
Calculation 


Calculate Handling Fee | Fixed > WEBSITE 


Handling Fee WEBSITE 





Displayed Error Message |This shipping method is not available. To 
use this shipping method, please contact 


us. 
Ship to Applicable Countries | All Allowed Countries v [WEBSITE 
Ship to Specific Countries [WEBSITE 
Show Method if Not Applicable | No v 


Sort Order 
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In the Condition drop-down menu we use the Weight vs. Destination option. Beside 
this option we also can choose from Price vs. Destination or # (number) of items 
vs. Destination. Depending on your needs, pick one of them. Since we are using 
the Weight option, we need to make sure that our entire product set has the correct 
weight configured. 


For the purpose of this recipe, disable the Flat Rate option in the menu. 


Now click Save Config and update your cache. 


Next we need to switch to the correct website using the Store View switcher in the 
Stores | Configuration menu. Click the drop-down arrow in the top-left menu, and 
select Main Website (or the name of your website): 





Configuration 


Store View: Default Config a Q 


Main Website 
GENERAL t Shipping 
Default Store View 


CATALOG | * Stores Configuration 
Frat Rate 


CUSTOMERS v 
Table Rates 


SALES A^ 











Confirm the pop-up window to continue and check the Table Rates options. Now we 
have two new options visible. The Export CSV gives us a comma-separated file called 
tablesrates.csv that we need to complete. Download the file and open up a 
spreadsheet editor, such as MS Excel, OpenOffice Calc, or Google Docs Spreadsheet. 


Since we are using the Weight vs. Destination option, the CSV schema looks 
as follows: 























Country Region/State | Zip/Postal Code | Weight (and above) Shipping Price 
NLD a * (0) 6.95 

NLD X sa 50 9.95 

NLD * i 100 14.50 

DEU 7 x (0) 10.50 

DEU a G 50 17.50 

DEU 5 es 100 22.50 
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Country Region/State | Zip/Postal Code | Weight (and above) Shipping Price 
FRA p a (0) 10.50 
FRA * A 50 17.50 
FRA 7 a 100 22.50 





In this example, we use a wildcard for the Region/State and Zip/Postal Code. 
You can replace this wildcard with the appropriate value. Upload your saved 
tablesrates. csv file in the Import section and click Save Config, and 
clean the cache: 








Condition 


Export 


Include Virtual Products in Price 
Calculation 


Import 


Export CSV 


Bestand kiezen | Geen bestand gekozen 


v 
Use 
Default 


v 
Use 
Default 








8. Before we can verify it is working, we need to update the weight of the product 
we want to sell. Go to Products | Catalog and update your grid using the weight 
attribute. Check out the Manage products in a catalog grid recipe of Chapter 4, 
Creating Catalogs and Categories for how to do this. 


9. Now let's edit Joust Duffle Bag from the sample data. Set the Weight to 50 and 
click Save & Close. Do the same for Strive Shoulder Pack (49) and Crown Summit 
Backpack (51). Your product grid should now look as follows: 





Thumbnail Name 


Quantity 


Status 


Weight 





Joust Duffle Bag 


Strive Shoulder Pack 


Crown Summit Backpack 


Simple $34.00 100.0000 


Product 


Simple 
Product 


$32.00 100.0000 


Simple 
Product 


$38.00 > 100.0000 


Enabled 


Enabled 


Enabled 


50.0000 Edit 


49,0000 


Edit 


51.0000 
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10. Finally, we can test if the checkout and shipping fee are configured correctly. Open up 
a browser, add the Joust Duffle Bag to you basket, and check it out. Complete your 
personal data and check the shipping Table Rate at the bottom. 


We only used German, French, and Dutch codes in this example. If you want to have 
your country shipping fees in the Table Rate CSV file, update them accordingly: 





Shipping Address 


Email Address * Order Summary 
info@yourdomain.com , 
1 Item in Cart ^ 
You can create an account after checkout. 
Joust $34.00 
úi Duffle 
Bag 
First Name * 
Qty: 1 


Ray 


Last Name * 


Bogman 


Company 


Street Address * 


My Street 1 


City * 


Berlin 


State/Province * 


Berlin v 


Zip/Postal Code * 


10117 


Country * 


Germany v 
Phone Number * 


1234567890 


Shippi ng Methods See our Shipping Policy 


® $17.50 TableRate Best Way 
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11. Congratulations, you just finished configuring shipping rules in Magento 2. 


12. Next we continue to configure the appropriate tax rules. Since we cannot cover all the 
different tax rules worldwide, we will stick for now with the European Union. Import to 
the following tax_rates.csv file to System | Import/Export Tax Rates. The file can be 
downloaded from https: //github.com/mage2cookbook/chapter5s. 


13. To check if all tax rates are created, go to Stores | Tax Zone and Rates. You see a 
large list of all rates and countries. 


> All rates apply to the current tax regulation of the European Union 
KJ with effect from the 1st of January 2015. The calculated tax is 
based on the country of the seller. 


14. Now go to Stores | Tax Rules and click on Rule 1. For this example we change the 
Name to EU Customers. Now let's select all the EU countries with the (standard) 
tax Rate and click Save Rule: 





Tax Rule Information 


Name * | EU Customers 


Tax Rate + US-CA-*-Rate 1 
US-NY-*-Rate 1 
US-MI-*-Rate 1 

v Austria (standard) 


Austria (reduced: food / books / pharma / 
hotels) 


vV Belgium (standard) 
Belgium (reduced: restaurants) 


Belgium (reduced: food / books/ pharma / 
medical / hotels) 


v Bulgaria (standard) 


Add New Tax Rate 











In this example we set the default rule to the high tax rate. Create a new rule when 
you are selling services or products that have a lower tax rate. But don't forget to 
create a new Product Tax Class in the Additional Settings. This class can then be 
used in every product type where it applies. 
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15. Next we need to configure the tax system setup. Go to Stores | Configuration | 
Sales | Tax. Depending on your production setup, using a multi domain with different 


shipping vendors and warehouse configuration may change. Always use the Store 
View switcher on the top to change the settings according to the domain or country 
you are selling in. The following examples will give you an overview of a basic setup 
created in Magento 2 Enterprise Edition. In the Magento 2 Community Edition some 


features, such as Gift Wrapping and Printed Card Prices, will not be shown: 





Tax Classes 














Shipping Prices 


Apply Customer Tax 


Apply Discount On Prices 


Apply Tax On 


Enable Cross Border Trade 





Tax Class for Shipping | None v 
Tax Class for Gift Options | None ’ 
Default Tax Class for Product | Taxable Goods v 
Default Tax Class for Customer | Retail Customer v 
Calculation Settings 
Tax Calculation Method Based | pow Total m 
On 
Tax Calculation Based On | Shipping Origin v 
Catalog Prices | Excluding Tax v 
This sets whether catalog prices entered from 





Magento Admin include tax. 





Excluding Tax v 
This sets whether shipping amounts entered 
from Magento Admin or obtained from gateways 
include tax. 

After Discount v 

Including Tax v 


Apply discount on price including tax is calculated 
ed on store tax if "Apply Tax after Discount” is 
selected. 





Custom price if available ’ 


No v 


When catalog price includes tax, enable this 
setting he price no matter what the 
customer's tax rate. 
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Default Tax Destination Calculation 


Default Country | Netherlands 


Default State | * 


Default Post Code 








Price Display Settings 


Display Product Prices In Catalog | Excluding Tax 


Display Shipping Prices | Excluding Tax 








Shopping Cart Display Settings 


Display Prices | Excluding Tax 


Display Subtotal | Excluding Tax 


Display Shipping Amount | Excluding Tax 


Display Gift Wrapping Prices | Excluding Tax 


Display Printed Card Prices | Excluding Tax 


Include Tax In Order Total | Yes 


Display Full Tax Summary | No 


Display Zero Tax Subtotal | No 














Orders, Invoices, Credit Memos Display Settings 











Display Prices | Including Tax 
Display Subtotal | Including Tax 
Display Shipping Amount | Including Tax 
Display Gift Wrapping Prices | Including Tax 
Display Printed Card Prices | Including Tax 
Include Tax In Order Total | Yes 
Display Full Tax Summary | No 
Display Zero Tax Subtotal | No 
Fixed Product Taxes 
Enable FPT | No 


Display Prices In Product Lists 


Display Prices On Product View 
Page 


Display Prices In Sales Modules 


Display Prices In Emails 


Apply Tax To FPT 


Include FPT In Subtotal 


ncluding FPT and FPT description 


ncluding FPT and FPT description 


ncluding FPT and FPT description 








ncluding FPT and FPT description 


No 





16. Change the setting and click Save Config. 
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17. Since we are using the Magento 2 sample data, we are ready to perform the test. 


Every product is configured with the Taxable Goods Tax Class. 
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18. Finally, we can test if the checkout and tax rates are configured correctly. Open up a 
browser and add the Joust Duffle Bag to your basket and check it out. Complete your 
personal data and check the Review & Payments step on the right in the checkout. 
The Order Summary should now look like this: 





Order Summary 

Cart Subtotal € 34,00 

Shipping €9,93 

Tax €7,14 

Order Total Incl. Tax € 51,09 

Order Total Excl. Tax € 43,95 

1 Item in Cart a 
Joust Duffle Bag € 34,00 

ay o 

Ship To: f 

Ray NL Bogman 

Mijn Straat 1 

Amsterdam, 1000 AA 

Nederland 

1234567890 

Shipping Method: f 

Best Way - Table Rate 











19. Congratulations, you just finished configuring tax rules in Magento 2. 
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Let's recap and find out what we did throughout the preceding recipe. In Steps 1 through 10, 
we configured a shipping method called Table Rates to handle all the shipping. We used the 
Weight vs. Destination option. Using this option we needed to update all our products with 
the correct weight attribute value. 


In Steps 12 through 18, we configured tax rules for the European Union using a tax_rates.csv 
file from GitHub. By using this file, it was easy to configure the appropriate tax rule. In Step 15, 
we gave an example of how a system configuration for a store view could look. 


Depending on where you live or are sending products to, using the correct measuring units 

in Magento 2 is important. This new feature helps us to configure whether we calculate 

the weight in Ibs (pounds) or kgs (kilograms). We can find this new option in Stores | 
Configuration | General | Locale Options. Here is an example showing the Weight Unit field: 





Locale Options 


Timezone | Central European Standard Time | |a | 


Locale | Dutch (Netherlands) v 
Weight Unit | kgs v 
First Day of Week | Sunday v 


Weekend Days | Sunday 
Monday 
Tuesday 
Wednesday 
Thursday 
Friday 
Saturday 
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Managing customer groups 


Everybody knows that every website is different. Some sites only sell products to Business to 
Consumer (B2C) while others sell to Business to Business (B2B) or both. 





In the B2C market it is pretty common to only have one customer group called Retailer. While 
the B2B market is related to the Wholesaler. Beside these two, we could also have groups 
such as Platinum, Gold, Silver, Special members, or groups based on their location. So the 
options are unlimited. Setting up the correct infrastructure for your customers helps you to 
segment these groups and offer them different prices. 


Magento offers by default the following groups: General, NOT LOGGED IN, Retailer, 
and Wholesale. 


1 
> By default, all groups are related to the Tax Class: Retail Customer. 
You may need to change this depending on your locale regulations. 


Getting ready 


To step through this recipe, you will use a Droplet created in Chapter 2, Magento 2 System 
Tools at DigitalOcean https ://www.digitalocean.com/. We will be using an NGINX, 
PHP-FPM, Composer-based setup including sample data. No other prerequisites are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to add additional customer groups. 
We want to create the following groups: Platinum, Gold, and Silver. The following steps will 
guide you through this. 


1. First login to the backend of Magento, and go to Stores | Other Settings | 
Customer Groups. 


2. Click on the Add New Customer Group button and create three new groups for 
Platinum, Gold, and Silver. Connect them to the Tax Class: Retail Customer for now 
and click Save Customer Group. 


3. Make sure to update your indexers. When you have your crontab configured 
correctly, you do not have to worry about this. Magento 2 will update this for 
you every minute. 


4. Nowclick on Customers | All Customers in the default menu. Select all the 
customers you want to upgrade to another group by marking them on the left 
of the grid. 
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5. Click on the drop-down Actions menu and choose Assign a Customer Group. A new 
menu will be listed where we can pick one of the newly created groups. Select one of 
the options, and click OK in the pop-up window: 








Q 


pene E 


Delete 


3 records found (3 selected) 












Subscribe to 
Newsletter 
























eronica Costello General 

Unsubscribe y NL Bogman General 
from Newsletter 

7 General 
Assign a General 
Customer Group 

Wholesale 
Edit 

Retailer 

M Co 2 Platinum Inc. All rights 





Gold 


Silver 





Special 
members 








6. To confirm the changes are OK, click the edit link on the right. In the Customer View 
tab we see the Personal Information and the listed Customer Group: 








CUSTOMER INFORMATION 


Customer View 


Account Information 
F 


Addresses 


Personal Information 


Last Logged In: Never (Offline) 


Confirmed email: Confirmed 
Account Created: Jan 22, 2016, 7:55:28 PM 
Account Created in: Default Store View 


Customer Group: Platinum 


Default Billing Address 
Veronica Costello 

6146 Honey Bluff Parkway 
Calder, Michigan, 49628-7978 
United States 


T: (555) 229-3326 





7. Congratulations, you have just finished configuring Customer Groups in Magento 2. 
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Let's recap and find out what we did throughout the preceding recipe. In Steps 1 through 6, 
we configured different Customer Groups and connected them to the appropriate customer. 


Creating customers groups basically does nothing. It is the relation to marketing or 
segmentation that makes the difference. In Magento 2, we got Catalog and Cart Price Rules. 
When combining them with the Customers Group we are able to create member discounts. 





Go to Marketing | Promotions | Catalog Price Rules, or Cart Price Rules and click Add New 
Rule. In the General Information section we see the Customer Groups list. 


Now go ahead and create a new rule and use one of the groups. Here is an example. Create 
a new rule called Platinum 25%, and select the Customer Groups Platinum. Now go to 

the Actions tab menu and choose the Apply rule: Percent of product price discount. In 
the Discount Amount commit 25. This is the amount of percent the Platinum member gets 
discounted from the total of his shopping cart. 


Make sure when testing that the customer login is in this group. 





Configuring inventories 


When selling physical products, it makes sense that every product in the warehouse is related 
to inventory or stock management. Configuring and managing stock is a day-to-day job. A 
basic inventory setup in Magento 2 is straightforward and comparable to Magento 1. With 
growth, a product inventory management (PIM) system will be needed. 


Getting ready 


To step through this recipe, you will use a Droplet created in Chapter 2, Magento 2 System 
Tools at DigitalOcean https: //www.digitalocean.com/. We will be using an NGINX, 
PHP-FPM, Composer-based setup including sample data. No other prerequisites are required. 
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How to do it... 


For the purpose of this recipe, let's assume that we need to configure an inventory for a 
Magento 2 setup. The following steps will guide you through this. 


1. First, log in to the backend of Magento and go to Stores | Configuration | Catalog | 
Inventory. You will see two menu options: Stock Options and Product Stock Options. 


In Stock Options you can configure the following: 





Stock Options 


Set Items’ Status to be In Stock 


: Yes v 
When Order is Cancelled 
Decrease Stock When Order is | yes > 
Placed 
Display Out of Stock Products | No v 
Products will still be shown by direct product 


URLS. 


Only X left Threshold |0 


Display products availability in 
stock on Storefront. 


Yes x 











All options are self-explanatory. One of the more interesting options is Display Out of 
Stock Products. This can be used to show the product even when it is currently not 
available. Some websites have a limited stock amount; by using this, the product is not 
always removed from the web, which is bad for search engine optimization (SEO). 


2. In Product Stock Options you can configure the following. All options are 
self-explanatory. Interesting options here are Out-of-Stock Threshold, Minimum Qty 
Allowed in Shopping Cart and Automatically Return Credit Memo Item to Stock. 
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3. 
4. 





The Out-of-Stock Threshold is set as Global, which means that it is related to all 

the products. Minimum Qty Allowed in Shopping Cart is related to the Customer 
Groups we created in the Managing customer groups recipe. Configuring the correct 
Minimum Qty amount helps to set the default before the discount rule applies. 
Automatically Return Credit Memo Item to Stock is helpful in managing credit 
orders. After creating a credit order, all items are updated in the current stock: 





Product Stock Options 


Please note that these settings apply to individual items in the cart, not to the entire cart. 


Manage Stock | Yes ’ 


Changing can take some time due to processing 
whole catalog. 


Backorders | No Backorders w 
Changing can take some time due to processing 


whole catalog. 


Maximum Qty Allowed in | 19999 
Shopping Cart 


Out-of-Stock Threshold |0 


Minimum Qty Allowed in 


s Customer Minimum 
Shopping Cart — Group Qty Action 
ALL | v 1 7 
Add 
Notify for Quantity Below |1 
Enable Qty Increments | No ’ 


Automatically Return Credit | Ņo 
Memo Item to Stock 











After configuring all elements, click Save Config and update your cache. 


Now go to Products | Catalog and click edit on the Joust Duffle Bag product. On 
the product page we have two options to change the current stock. The first option is 
Quantity in the Product Detail tab in Basic Settings. This option is straightforward. 
The second, more detailed option is in the Advanced Settings tab called Advanced 
Inventory. These options here only relate to this product. Depending on the 
configuration, you are able to override the Config Setting of the system. 
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In Advanced Inventory you can configure the following. All options are self-explanatory. 
Interesting options are Qty Uses Decimals and Allow Multiple Boxes for Shipping. 


The Qty Uses Decimals setting determines whether decimals will be used in the 
quantity field for the product (for example, 3.5 yards) or not. 


The Allow Multiple Boxes for Shipping setting determines whether multiple boxes 
will be used for the product during shipping (for example, custom build computer incl. 
monitor) or not: 





Advanced Inventory 


Manage Stock 


v) Use Config Settings 


Qty 99 


Out-of-Stock 
Threshold 


v) Use Config Settings 


Minimum Qty 
Allowed in 


Shopping Cart (X) Use Config Settings 


Maximum Qty 
Allowed in 


Shopping Cart (X) Use Config Settings 


Qty Uses 
Decimals 


Allow Multiple 
Boxes for 


Shipping. 


No nd 


Backorders 
v) Use Config Settings 


Notify for 
Quantity Below 


v) Use Config Settings 


Enable Qty 
Increments 
v) Use Config Settings 
Stock Availability In Stock ’ 











5. Congratulations, you just finished configuring inventory management in Magento 2. 


[173] 
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Let's recap and find out what we did throughout the preceding recipe. In Steps 1 through 4, 
we configured an inventory on a global system level and an advanced product inventory level. 
Depending on your system setup, you can change them in line with the website or store view. 


Depending on your setting, it is best to check your low stock on a daily basis. Go to Reports | 
Products | Low Stock. All products with a low stock setting will be listed here. 


Configuring currency rates 


Every website selling products uses some kind of currency. Without a valid currency things 
would start to get messy. 





Configuring these currencies is pretty straightforward. The most interesting part is the 
currency rate exchange. Every day this rate needs to be checked and updated. Decreases in 
value are important on the product you sell. So choosing the correct default currency needs to 
be considered appropriately. 


Getting ready 


To step through this recipe, you will use a Droplet created in Chapter 2, Magento 2 System 
Tools at DigitalOcean https: //www.digitalocean.com/. We will be using an NGINX, 
PHP-FPM, Composer-based setup including sample data. No other prerequisites are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to configure three currencies—US 
Dollar, Euro, and Pound Sterling—with Magento 2. The following steps will guide you through 
this. 


1. First log in to the backend of Magento. Go to Stores | Configuration | General 
| Currency Setup and select the Base Currency. Now select Default Display 
Currency. When running a multi website or store view, you may need to switch 
to the appropriate website or store view to change the value. 


2. Next select in the multi select window a currency from British Pound Sterling, Euro, 
and US Dollar. Hold down the Ctrl key as you select from the list and click Save 
Config. Make sure you update your cache. 


3. Now go to Stores | Currency Symbols to check if they are correct. Make adjustments 
when needed. 
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4. Now goto Stores | Currency Rates and click on the Import button. Depending 
on the default currency, the exchange rate between GBP, EUR, or USD is calculated. 
Check if the rates are correct and click Save Currency Rates. Make sure you update 





your cache: 
Import Service Webservicex v 
Import 
EUR GBP USD 
EUR 0.7573 1.4150 











5. Next open up a new browser and go to your home page. In the top right corner 
there is a drop-down with all the listed currencies. Select one of them to test if the 
currencies are correct. 


6. Congratulations, you just finished configuring currency rates in Magento 2. 


Let's recap and find out what we did throughout the preceding recipe. In Steps 1 through 
5, we configured additional currency for our website. Depending on the currencies you are 
selling, this can be updated in the backend. On the frontend, customers can easily switch 
and buy in their preferred currency. 


Would you like to update the currency rates on a daily, weekly, or monthly basis? Go to Stores 
| Configuration | General | Currency Setup | Scheduled Import Setting and Enable this 
depending on your needs. This service will update the rates on the selected time basis. 


Managing advanced pricing 


Selling products can be hard. Lots of websites are selling the same product. But how can we 
attract new customers and persuade them to buy our goods? 


Many websites have the same default retail price shown on their site. When using advanced 
pricing we can show special prices within a particular date range, or display tier prices for our 
beloved platinum members. 
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Another option could be using a minimum advertised price (MAP). This feature is useful 

if your product manufacturer has established a Manufacturer's Suggested Retail Price 
(MSRP), and you want to sell the product at a price lower than the MSRP. What this feature 
basically does is hide the product price display in your catalog and only shows this during 
product purchase. 


Getting ready 


To step through this recipe, you will use a Droplet created in Chapter 2, Magento 2 System 
Tools at DigitalOcean https: //www.digitalocean.com/. We will be using an NGINX, 
PHP-FPM, Composer-based setup including sample data. No other prerequisites are required. 


How to do it... 


For the purpose of this recipe, let's assume that we need to create advanced pricing for some 
of our products in Magento 2. The following steps will guide you through this. 


1. First log in to the backend of Magento, go to Products | Catalog and open Joust 
Duffle Bag. 


2. Now click on the Advanced Pricing menu on the left and set a new Special Price 
from the date range you prefer. 


3. Now update your Tier Price using the Platinum, Gold, and Silver Customer Groups. 


4. Finally, set the new price for the Manufacturer's Suggested Retail Price and choose 
the correct Display Actual Price option. 


You can choose from Use Config, On Gesture, In Cart, and Before Order 
Confirmation. 


a Use Config: The default configuration located in Stores | Configuration | 
Sales | Sales | Minimum Advertised Price. 


a On Gesture: Product prices are shown in the catalog pages but only when 
the user clicks on the link, which shows the price in a pop-up. 


a In Cart: Customers can see product prices when products have been added 
to the cart. 
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a Before Order Confirmation: Product prices are shown on the checkout page: 











oF Add Atl 
Advanced Pricing 
Special Price € 30.00 [G 
Special Price 7 PEETA 
1/24/2016 
From Date 
Special Price To i 
Date 
Cost € A 
Tier Price Customer 
Web Site Group Quantity Item Price Action 
All) v Gol v 10 22.50 Delete 
and above 
All) v Plai x 10 20.00 Delete 
and above 
All) v Silv v 10 25.00 Delete 
and above 
Add Price 
Manufacturer's m EAE 
k € 35.00 GLOBAL 
Suggested Retail 
Price 
Display Actual On Gesture [a] [WEB 
Price 
On Gesture 
In Cart 
Before Order Confirmation 
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5. Next open up a new browser and go to http: //yourdomain.com/joust - 
duffle-bag.html. Depending on your configuration, it should look as follows: 








Joust Duffle Bag 
kk? 2 reviews 


€35,6¢ Click for price 














Joust Duffle Bag 
*k*«y 2 Reviews Add Your Review 


Click for price What's this? A S 
SKU#: 24-MB01 





x 
Our price is lower than the manufacturer's "minimum advertised price." As a 
result, we cannot show you the price in catalog or the product page. 


You have no obligation to purchase the product once you know the price. You can 
simply remove the item from your cart. 


Add to Cart 


6. Congratulations, you just finished managing advanced pricing in Magento 2. 
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Let's recap and find out what we did throughout the preceding recipe. In Steps 1 through 
5, we configured advanced pricing using a special price, a tier price, and the minimum 
advertised price in a product. 








Creating a 
Magento 2 Theme 


In this chapter, we will cover some basics on how to build your own theme based on the 
Magento 2 blank theme and add/change pages of built-in modules through layout XML 
through the following recipes: 

> Creating a new theme 

>» Changing a layout XML of a Magento 2 module 

» Adding CSS/JS to pages 

>» Using Grunt for CSS changes 

>» Adding static blocks to pages through layout XML 

>» Adding static blocks to pages through widgets 

» Using a dynamic serving theme based on the client browser 

>» Creating theme-specific translations 


Introduction 


Theming is an important part of building your e-commerce website; making it easy for users to 
navigate and SEO-friendly will make sure that your conversion will be optimized. 


In Magento 2, theming has changed in a big way; it's easier to optimize your theme with the 
more granular way of controlling what is outputted through the layout configurations. 


In this chapter, we will see some basics on how to build your own theme extended from the 
Magento blank theme, which can also be used to extend any other theme you want to use as 
a starting point. 
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In order to understand the way theming is done, you should know how to work with Less, CSS, 
XML, and PHP. 


Creating a new theme 


Themes in Magento 2 are set up a bit differently than Magento 1. Some of these changes are 
as follows: 

>» Smaller layout files per layout handle 

>» Less (default) implementation with an internal Less preprocessor 

>» Extended layout methods to move and change blocks 

>» Magento UI library for default components, such as forms, buttons, and more 

>» Installable through Composer 

>» Fallback to module layout, templates, and other public files 

>» Static file generation to improve page load times 


In this sample theme, the files are located in app/design/frontend/<Vendor>/<Theme>. 
When a theme is installed through Composer, it will be installed in the vendor directory. 


Getting ready 


In order to work with themes, you should have a basic knowledge of XML, HTML, CSS, and 
Less as these are used to build your theme. 


How to do it... 


The following are the steps to create a new theme: 


1. First, we start by creating the theme definition file: 


app/design/frontend/Genmato/default/theme.xml 


<?xml version="1.0"?> 
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:n 
oNamespaceSchemaLocation="urn:magento: framework: Config/etc/theme. 
xsd"> 

<title>M2 Cookbook Sample Theme</title> 

<parent >Magento/blank</parent> 

<media> 

<preview_image>media/preview.png</preview_image> 

</media> 

</theme> 
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Create preview. png for how your theme will look like. (This file needs to be present, 
but you can start with a blank file and replace this later when your theme is done.) 
Place this preview image under app/design/frontend/Genmato/default/ 
media/. 


In order to have it installable through Composer, we need to create a composer. 
json file: 


app/design/frontend/Genmato/default/composer.json 


{ 


"name": "genmato/sample-theme", 
"description": "Genmato Sample Theme", 
"require": { 
"php": "~5.5.0|~5.6.0|~7.0.0", 
"magento/theme-frontend-blank": "100.0.*", 
"magento/framework": "100.0.*" 
}, 
"type": "magento2-theme", 
"version": "1.0.0", 
"license": [ 
"OSL-3.0", 
"AFL-3.0" 
l]; 
"autoload": { 
"Files": [ 


"registration.php" 


} 


In order to register the theme when loaded through Composer, it needs 
registration. php: 


app/design/frontend/Genmato/default/registration.php 


<?php 
\Magento\Framework\Component \ComponentRegistrar: :register ( 
\Magento\Framework\Component \ComponentRegistrar: : THEME, 
'frontend/Genmato/default', 

DIR 


i 
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5. Create a static file directory structure in your theme: 


app/design/frontend/Genmato/default 


web/ 
web/css/source/ 
web/fonts/ 
web/images/ 
web/js/ 


6. Define your logo file and size: 


app/design/frontend/Genmato/default/Magento_Theme/layout / 
default .xml 


<?xml version="1.0"?> 
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento: framework: 
View/Layout/etc/page_configuration.xsd"> 
<body> 
<referenceBlock name="logo"> 
<arguments> 
<argument name="logo file" xsi:type="string"> 
images/genmato.svg</argument > 
<argument name="logo img width" xsi:type="number"> 
372</argument> 
<argument name="logo img height" xsi:type="number"> 
84</argument > 
</arguments> 
</referenceBlock> 
<referenceBlock name="report.bugs" remove="true"/> 
</body> 
</page> 


7. Place your logo file in app/design/frontend/Genmato/default/web/images/; in this 


example, an SVG is used but you can also define a PNG or JPG file. 


8. Itis possible to configure your own image sizes for the different images; when 
generating the static content, all images will be created in the width/height 
configured in this file: 


app/design/frontend/Genmato/default/etc/view. xml 


<?xml version="1.0"?> 
<view xmlns:xsi="http: //www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento: framework: 
Config/etc/view.xsd"> 
<media> 
<images module="Magento_ Catalog"> 
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<image id="category page grid" type="small_image"> 
<width>240</width>s 
<height >300</height> 
</image> 
</images> 
</media> 


</view> 


Create your theme style (Less) file. In this file, all overrides for styles used in the blank 
theme and Magento UI framework can be specified. This can be used to change 
default colors in your theme: 


app/design/frontend/Genmato/default/web/css/source/_theme.less 


@page background-color: @color-gray20; 
@primary color: @color-gray80; 


@genmato__green: #009A4E; 
@genmato_ blue: #0089CF; 


@link_ color: @genmato__ green; 
@link__hover__ color: darken(@link color, 10%) ; 


@button-primary background: @genmato_ green; 
@button-primary border: darken (@genmato_ green, 40%) ; 
@button-primary color: @color-black; 


@button-primary hover background: darken (@genmato_ green, 10%) ; 
@button-primary hover border: darken(@genmato__ green, 50%) ; 





@button-primary hover color: @color-black; 


@navigation_ background: @genmato_ blue; 


. After all the files are uploaded to the Magento 2 installation, refresh the cache: 


bin/magento cache:clean 


. Next, generate the static content: 


bin/magento setup:static-content :deploy 
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You can rerun this command every time you make changes to your theme 
and need to regenerate the CSS from the Less files. Make sure that you 
remove your theme-generated files from the following locations: 


pub/static/frontend/<Theme Vendor> 
& 
GA var/view_preprocessed/css/frontend/<Theme Vendor> 


Otherwise, the changes in the Less files in your theme will not be used as 
the preprocessor checks if there is already a generated CSS file available. 
Check the Using Grunt for CSS changes recipe of this chapter on how to 
use live reloading of CSS changes without the need of recompiling. 


12. The theme should now be available to select for your store. In order to change the 
theme, go to the following: 


Stores | [General] Design | Design Theme 


This can be seen in the following screenshot: 





GENERAL ooh Design Theme 


-= No Theme ~- 
Genera Design Theme ¥ M2 Cookbook Sample Theme 

Magento Blank d 
wat Magento Luma 


Design User-Agent Exceptions Search String Design Theme Action o 


Add 








Choose the newly created theme from the drop-down list and save the 
configuration change. 


13. Navigate to your store frontend and check whether the new theme is visible. The 
theme used in this example looks as follows: 
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The theme configuration in Magento 2 is more powerful than in Magento 1, allowing you to 
have better control on changing elements that are available from installed modules. The way 
in which the fallback is configured makes it easier to create different variants of a theme by 
defining the parent theme only. During compilation of the theme, all the files are gathered 
from the right parent and merged into your theme. This improves page rendering as there is 
no more layout merging done. All static elements such as CSS and images are pregenerated. 
Building themes for distribution and changing them afterward is now also much easier and 
can be done without modifying the bought theme. 


During the bin/magento setup:static-content :deploy command, the system 
collects all the Less files from the following: 
>» Current active theme 


>» The defined parent theme(s); this is done recursively for all parents until there is no 
parent defined 


>» The module files 





Creating a Magento 2 Theme 





Next, it will use the built-in PHPLess module to merge all these files into the configured CSS 
files. In this example, it generated a styles-m.css and styles-1.css as configured in the 
blank theme (Magento/blank/Magento_Theme/default_head_blocks.xml): 


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento: framework: 
View/Layout/etc/page_configuration.xsd"> 
<head> 
<css src="css/styles-m.css" /> 
<css src="css/styles-l.css" media="screen and (min-width: 





768px) "/> 
<css src="css/print.css" media="print" /> 
</head> 
</page> 


The styles files are built from styles-m.less and styles-1.less (found in Magento/ 
blank/web/css/) and define all the Less files that should be included. The two files are the 
definition files for the mobile and desktop versions of the layout. These external Less files are 
included through the default @import command used in Less. They also contain a special 
@magento_import command (which has to be commented out in order to avoid breaking 
the Less preprocessor). During compilation of the theme, Magento replaces these imports 
with a regular @import command but with a resolved path to the corresponding file location 
based on the fallback file found. During compilation, all files are stored at the pub/static/ 
frontend/<Vendor>/<theme> location and served as static files to improve load times. 


Adding theme variants 

Creating a variant of a theme, for example, for seasonal promotions, is easy to add. Here, it 
is only necessary to create a new theme that has a parent to the default/normal theme; all 
separate themes need to be located in their own directories. The theme only needs the files 
that are different from the parent theme; this can be just CSS changes or static files used as 
backgrounds in the theme. 


Layout files 


In Magento 2, the layout files are split per layout handle; this makes it easier to modify a 
specific page only. A layout handle is a unique identifier for the layout definitions that are used 
to build the page. There are three different types of layout handles: 


> page type layout handles: These identify the page based on the full action names of 
the controller (customer_account_create) 


> page layout handles: These are added identifiers based on a product type shown 
(catalog _product_view_type_ downloadable) 


>» custom handles: These are added custom identifiers not referencing to any page 
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Every file is located in the corresponding Module directory, so for the customer_account_ 
create page handle, the layout file would be located in [Theme Directory] /Magento_ 
Customer/layout/customer_account_create.xml. In the design and building of the 
pages, the layout is configured based on containers and defines the basic structure of a 

page (such as the header, footer, and columns—left, main, and right). In the containers, the 
content is added using blocks; every block has a template and block class assigned that is 
used to render the HTML for that block. It is possible to have multiple blocks assigned to a single 
container, allowing you to assign the order in which they must be shown. During generation, all 
layout files are merged together for each layout handle, allowing you to modify the output in the 
theme without the need of including the complete original files from the module. 


Template files 


Template files are phtm1 files containing the HTML and PHP code to build the specified 
content. In order to change or add data with a template in your theme, you will need to copy 
the original template file to your theme, for example, to change the account registration 
form, the <customer-module-dir>/view/frontend/templates/form/register. 
phtml file needs to be copied to <theme-dir>/Magento_Customer/templates/form/ 
register.phtml and can be edited there. 


Magento UI library 
In Magento 2, there is a Ul library available that includes basic interface CSS-class elements 
that can be used in the templates. The following components are available: 

>» actions-toolbar 

>» breadcrumbs 

>» buttons 

>»  drop-downs 


>» forms 
> icons 
> layout 
>» loaders 


>» messages 
> pagination 


>» popups 
> ratings 
>» sections 


» tabs and accordions 
>» tables 
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>» tooltips 

> typography 

>» list of theme variables 
The CSS definition of all these elements can be altered to find out what variables to alter; 
check out <magento-root>/lib/web/css/source/lib/variables. In order to modify 


the way an element is rendered, you can look up the required variable and add your own 
definition in the <theme-directory>/web/css/source/_theme.less theme file. 


Changing a layout XML of a Magento 2 


module 





In order to customize the layout to your own requirements, you can just add it to your theme 
and make the required changes. In order to change a layout from a Magento 2 module, you 
will need to locate the module and layout handle that you want to alter. 


Getting ready 


In this recipe, we will change the order of some elements on the product view page based on 
the theme created in the previous recipe. 


How to do it... 


The following steps will show you how to change elements defined in a layout file to match 
your desired design: 


1. Create the layout handle file for the Magento_Catalog module: 


app/design/frontend/Genmato/default/Magento_ Catalog/layout/ 
catalog product_view.xml 


<?xml version="1.0"?> 
<page layout="1column" 
xmlns:xsi="http: //www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento: framework: 
View/Layout/etc/page_configuration.xsd"> 
<body> 
<move element="product.info.stock.sku" 
destination="product.info.price" 
after="product.price.final"/> 
<move element="product.info.review" 
destination="product.info.main" 
before="product.info.price"/> 
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<remove name="report.bugs"/> 
</body> 
</page> 
2. Upload the file to your Magento 2 installation and refresh the cache: 


bin/magento cache:clean 


3. Next, generate the static content: 


bin/magento setup:static-content:deploy 


Make sure that you remove your theme-generated files from the following locations: 
pub/static/frontend/<Theme Vendor> 
var/view_preprocessed/css/frontend/<Theme Vendor> 

Otherwise, the changes in the Less files in your theme will not be used as the 
preprocessor checks if there is already a generated CSS file available. 


4. Navigate to a product page to see the changes: 


Stellar Solar Jacket | Stellar Solar Jacket 
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In the layout XML files, there are a few commands available to change the way in which a page 
is rendered. Here is a short description of every available command. 





<container> 


A container defines a structural layout block that does not produce its own content and can 
hold other blocks and/or containers. The output of the content generated by the children 

can be rendered in any valid HTML 5 tag with the option to specify an ID or class used for the 
element. Here is an example of the product .info.stock.sku container and the blocks 
that are added: 


<container name="product.info.stock.sku" label="Product auxiliary 
info" htmlTag="div" htmlClass="product-info-stock-sku"> 
<container name="product.info.type" before="-"/> 
<block class="Magento\Catalog\Block\ Product \View\Description" 
name="product.info.sku" template= 
"product/view/attribute.phtml" after="product.info.type"> 
<arguments> 
<argument name="at_call" xsi:type="string">getSku</argument> 
<argument name="at_code" xsi:type="string">sku</argument> 
<argument name="css_ class" xsi:type="string">sku</argument> 
<argument name="at_label" 
xsi:type="string">default</argument> 
<argument name="add_attribute" 
xsi:type="string">itemprop="sku"</argument> 
</arguments> 
</blocks 
</container> 


A block generates content from the specified class and assigned template file. In the 
arguments of the block, it's possible to specify the load order using the before and 
after tags. Depending on the class specified, it's possible to pass information using the 
<argument > tag: 


<block class="Magento\Catalog\Block\Product\View\Description" 
name="product.info.overview" template= 
"product/view/attribute.phtml" group="detailed_info" 
after="product.info.extrahint"> 
<arguments> 

<argument name="css_ class" 
xsi:type="string">overview</argument > 

</arguments> 

</blocks> 
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Arguments passed to the class can be the class methods or magic setters/getters and can be 
accessed in the template. The preceding css_class argument assigned can be requested in 
the template through $this->getCssClass() ;. 


referenceContainer/referenceBlock 


In order to add a block or container to an element specified in another layout file, you will need 
to reference this element. This way it's possible to add blocks to both the main content area 
and sidebar in the same layout file: 


<referenceContainer name="product.info.type"> 
<block class="Magento\Catalog\Block\ Product \View\Type\Simple" 
name="product.info.simple" as="product_type data" 
template="product/view/type/default.phtml"/> 


<container name="product.info.simple.extra" 
after="product.info.simple" as="product_type data_extra" 
label="Product Extra Info"/> 


</referenceContainer> 


move 

The move command allows you to change the location where the element is shown to another 
element. In this recipe, the SKU information was placed after the product .price. final 
block in the product .info.price container, where the default location would be the first 
block shown. 


remove 


The remove command will remove the block referenced with the name parameter; this will 
cause it not to be rendered on the page. 


update 

With the update instruction, it is possible to include a layout handle. This allows you to include 
a set of instructions defined once to multiple layouts. An example of this is the customer 
account; here, all account menu options for logged in users are defined in the customer _ 
account .xm1 layout file: 


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
layout="2columns-left" xsi:noNamespaceSchemaLocation= 
"urn:magento: framework: View/Layout/etc/page configuration.xsd" 
label="Customer My Account (All Pages)" 
design_abstraction="custom"> 
<body> 
<attribute name="class" value="account"/> 
<referenceContainer name="sidebar.main"> 
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<block class="Magento\Framework\View\Element \Html\Links" 
name="customer_account_navigation" before="-" 
template="Magento_ Customer: :account/navigation.phtml"> 


<block class= 
"Magento\Framework\View\Element \Html\Link\Current" 
name="customer-account -navigation-account-link"> 
<arguments> 
<argument name="label" xsi:type="string" 
translate="true">Account Dashboard</argument> 


<argument name="path" 
xsi:type="string">customer/account</argument> 


</arguments> 

</blocks 

<block class= 
"Magento\Framework\View\Element \Html\Link\Current" 
name="Ccustomer-account -navigation-account-edit-link"> 
<arguments> 


<argument name="label" xsi:type="string" 
translate="true">Account Information</argument> 
<argument name="path" 
xsi:type="string">customer/account/edit</argument> 
</arguments> 
</block> 


<block class= 
"Magento\Framework\View\Element \Html\Link\Current" 
name="customer-account -navigation-address-link"> 


<arguments> 


<argument name="label" xsi:type="string" 
translate="true">Address Book</argument> 


<argument name="path" 
xsi:type="string">customer/address</argument> 


</arguments> 
</block> 
</block> 
</referenceContainer> 
</body> 
</page> 


This file is then included in the customer_account_index.xml layout (and other pages 
using this menu): 


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
layout="2columns-left" xsi:noNamespaceSchemaLocation= 
"urn:magento: framework: View/Layout/etc/page_ configuration.xsd"> 
<update handle="customer_account"/> 
<body> 
<referenceBlock name="page.main.title"> 
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<action method="setPageTitle"> 
<argument translate="true" name="title" 
xsi:type="string">My Dashboard</argument> 
</action> 
</referenceBlock> 
<referenceContainer name="content"> 
<block class="Magento\Framework\View\Element\Template" 
name="customer_account_dashboard_top" as="top"/> 
<block class="Magento\Customer\Block\Account \Dashboard\Info" 
name="customer_account_dashboard_info" as="info" template= 
"account /dashboard/info.phtml" cacheable="false"/> 
<block class="Magento\Customer\Block\Account \Dashboard\ 
Address" name="customer_account_dashboard_address" 
as="address" template="account /dashboard/address.phtml" 
cacheable="false"/> 
</referenceContainer> 
</body> 
</page> 


Overriding template files 
Templates are loaded in the following order: 


1. Active theme, where it looks for the file in <theme>/<Module_ 
Namespace>_ <Module_name>/template/<requested template>. 


2. Parent theme(s) (until no parent is found). 


3. Module directory. 


In order to override a template in your theme, it is possible to create your own version of the 
file. For example, to replace the left navigation file from the catalog module, copy the file 
from the original location <Magento_ Catalog path>/view/frontend/templates/ 
navigation/left.phtm1 to your theme location <theme>/Magento_Catalog/ 
templates/navigation/left.phtml. Here, you can apply your own changes necessary 
to suit your theme. 


Another option is to change the template file assigned through a layout change; this can be 
useful if you want to change the template only for a specific product, category, or other page 
handle available. For this, you need to create a new layout file based on the file handle where 
you reference the block where you want to update the template. Using the <action> method, 
setTemplate, you can now specify the new template you want to use: 


<referenceBlock name=" [blockname] "> 


<arguments> 
<argument name="template" xsi:type="string">[Module 
name]:: [path to template] </argument> 
</arguments> 


</referenceBlock> 
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Adding CSS/JS to pages 


Adding your own CSS or JS to every or specific page can also be done through a layout XML 
file. The source of a file that you want to include can come from the following: 





» An external source hosted remotely 
>» Module-specific, which is mainly used by JavaScript 


>» Theme-specific, which is mainly used when adding CSS but can also be used to add 
custom JavaScript 


Getting ready 


In order to include CSS or JavaScript to a page, you first need to know where you want 

to include your files and where the file is located that you want to include. In this recipe, 
we will see how to include both an external CSS and JavaScript file and a theme JavaScript 
and CSS file. 


How to do it... 


This recipe is based on the theme created in the Creating a new theme recipe of this chapter. 


1. To add anew source (CSS or JS) to all pages, the configuration is done through the 
default_head_blocks.xm1 file. It is also possible to add it to a single page only 
through the layout file for that layout handle: 


app/design/frontend/Genmato/default/Magento_Theme/layout / 
default_head_blocks.xml 


<?xml version="1.0"?> 
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento: framework: 
View/Layout/etc/page_configuration.xsd"> 
<head> 
<link src= 
‘https: //fonts.googleapis.com/css?family=Open+Sans' 
type='text/css' srce_type="url"/> 
<link src='https://ajax.googleapis.com/ajax/libs/ 
jqueryui/1.11.4/jquery-ui.min.js' src_type="url"/> 
<link src="js/sample.js"/> 
<css src="css/sample.css" /> 
</head> 
</page> 
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2. Add the custom JavaScript code (just the basic file here): 


app/design/frontend/Genmato/default/web/js/sample.js 


require ([ 
'jquery', 
], function ($) { 
jQuery (document) . ready (function () { 


// You jQuery code here 
}); 
pD; 
3. Add your custom stylesheet Less file: 


app/design/frontend/Genmato/default/web/css/sample.less 
you can add your own Less code here! 


4. Upload the file to your Magento 2 installation and refresh the cache: 


bin/magento cache:clean 


5. Next, generate the static content: 


bin/magento setup:static-content :deploy 


Make sure that you remove your theme-generated files from the following locations: 
pub/static/frontend/<Theme Vendor> 
var/view_preprocessed/css/frontend/<Theme Vendor> 


Otherwise, the changes in the Less files in your theme will not be used as the 
preprocessor checks if there is already a generated CSS file available. 


Refresh the page and make sure that the new CSS and JS files are added to the 
header of the source of your page. 


During the generation process, the XML tags that are added to the head component are 
converted depending on what is supplied in the configuration. 


External files 


When adding files from an external source, you need to specify src_type=url. Otherwise, 
the supplied source will be converted into a file on the local filesystem and result in an error 
loading the resource. 
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JavaScript files 


Magento 2 uses RequireJS to manage all JavaScript and its dependencies; this means that it's 
not possible to just include an extra JS file and use functions that are available with jQuery. In 
order to use calls to jQuery functions, you need to add this dependency in your JS file; this will 
make sure that the jQuery library is loaded before your code is executed. 


CSS files 


When including a CSS file, the CSS is generated from a Less file, which is done automatically 
by the Magento preprocessor when the specified CSS isn't found and there is a . less file 
found with the same name. 


Removing a file in the header 


It is also possible to remove a file from the header; this can be useful if you want to remove an 
included resource from a parent theme. To remove a CSS, JavaScript, or font from the header, 
you can use the <remove> tag where you reference the path that you want to remove. For 
example, to remove the styles-1.css file from the page, you can use the following: 


<theme>/Magento_Theme/layout/default_head_blocks.xml 


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento: framework: 
View/Layout/etc/page_configuration.xsd"> 
<head> 
<remove src="css/styles-l.css"/> 
</head> 
</page> 


Using Grunt for CSS changes 


Making changes during the development of your theme can take some time while you are 
waiting on removing the compiled files, recompiling, and reloading. To optimize the workflow 
and speed up the reloading of the changes, it is possible to use the built-in client-side Less 
compiler based on a JavaScript compilation. Using this client compiler might not work fast 
enough for you and require manual reloads. Another option is to use the Grunt tool to watch 
changes made in the . less files. In this recipe, we will see how to make use of this tool and 
update CSS files without the manual removing of files and refreshing the browser. 


Getting ready 


Using Grunt should only be needed on your local development setup; for production systems, 
you should use the built-in Magento Less compiler. Grunt is built on Node.js; in order to use it, 
you should first install Node.js in your system. 
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How to do it... 


This recipe will explain how to install, configure, and use Grunt to monitor file changes and 
recompile the CSS scripts. This recipe is based on the theme configured in the Creating a new 
theme recipe of this chapter. When you use it on your own theme, change the names/files 
according to your theme needs: 


1. 


First, we need to install the Grunt command-line tool. As Grunt is a Node.js package, 
this installation is done through the Node.js package manager (npm): 


npm install -g grunt-cli 


To install Grunt in your Magento project directory, navigate to the Magento 2 root 
directory of your installation and run the following: 


npm install grunt --save-dev 


After installing Grunt, the Node.js dependencies in your Magento project should be 
updated. To do so, run the following command from your Magento directory: 

npm install 

npm update 


To allow Grunt to recompile your own theme, it should be declared in the dev/ 
tools/grunt/configs/themes. js file. This file configures the paths used to 
monitor file changes and the files that should be created. Add the following code to 
the file: 
genmato: { 
area: 'frontend', 
name: 'Genmato/default', 
locale: 'en_US', 
files: [ 
‘ess/styles-m', 
‘ess/styles-1', 
‘ess/sample' 
ey 
dsl: 'less' 


}; 


Run the initial setup of your theme files; this will create symlinks from the pub/ 
static/frontend/Genmato/default theme directory to the source theme files 
(located in app/design/frontend/Genmato/default): 


grunt exec:genmato 
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The following output displays the processing done by Grunt: 





mop :html vladimir$ grunt exec:genmato 
Running “exec:gernmato” (exec) task 
Running “clean:gennato” (clean) task 
>> 541 paths cleaned. 








Done, without errors. 


Execution Time (2016-02-16 11:28:46 UTC) 

loading tasks 185ms —— 29% 

clecn:gensato 454ms aT 7C 
Total 646ms 


Processed Area: frontend, Locale: en_US, Theme: Genmato/defoult, File type: less. 
-=> css/styles-m.less 

-> css/styles-1.less 

-> css/sample.less 

Successfully processed. 


Done, without errors. 


Execution Time (2016-02-16 11:28:45 UTC) 

loading tasks 2977s 5% 

exec: genmato ae EE | 
Total 5.7s 











6. Now that the symlinks are created, the Less files should be compiled; this will create 
the theme CSS files as they were configured in the themes. js file in step 4: 


grunt less:genmato 


This can be seen in the following screenshot: 





mbp:htal vladieir$ grunt Lless:genmato 

Running "less:genmato” (less) task 

File pub/static/frontend/Genmato/default/en_US/css/styles-m.css created: 278.12 kB + 480.24 kB 
File pub/static/frontend/Genmato/default/en_US/css/styles-l.css created: 72.4 k8 +» 125.22 kB 
File pub/static/frontend/Genmato/defoult/en_US/css/sample.css created: © B +08 


Done, without errors. 


Execution Time (2016-02-16 11:29:37 UTC 


loading tasks 186ms M 

loading grunt-contrib-less liéms Mig2* 

less:genmato eee 
Total 6.65 








7. In order to display the CSS changes made automatically, install the LiveReload plugin 
for your browser from http: //livereload.com/extensions/. When the plugin 
is installed, click on the icon to activate the live reloading of the CSS files. This should 
be done only on your local website URL. 


8. When making changes to the Less files in your theme, the Grunt watcher should 
be activated: 


grunt watch 


This will detect the changes once you save a theme Less file and trigger the 
compilation of your Less code to a CSS file. 
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9. Now you can make all your necessary changes, for example, we could change the 
color of the navigation background: 


app/design/frontend/Genmato/default/web/css/source/_theme.less 


@genmato__orange: #FCBF45; 
@navigation_ background: @genmato__ orange; 


After saving the file, the compilation of the CSS is triggered and a new CSS file is 
stored for your theme: 





jnbp:html vledimirS grunt watch 

Running “watch” task 

Waiting. .. 

>> File “pub/static/frontend/Genmato/default/en_US/css/source/_theme.less" changed. 

Running “Less:genmato” (less) task 

File pub/stotic/frontend/Genmato/default/en_US/css/styles-m.css created: 278.12 kB +» 480.24 kB 
File pub/static/frontend/Genmato/default/en_US/css/styles-l.css created: 72.4 kB + 125.19 kB 
File pub/static/frontend/Genmoto/default/en_US/css/sample.css created: @8 +» © B 


Done, without errors. 


Execution Time (2016-02-16 11:44:02 UTC 


loading tasks 298es S 
loading grunt-contrib-less 132ms Mm2* 
Less: geneato SSS EEE 


Total 8.2s 


[Completed in 9.265s at Tue Feb 16 2016 12:44:18 @T+0100 (CET) - Waiting... 
>> File “pub/static/frontend/Genmato/default/en_US/css/styles-m.css" changed. 
>> File “pub/static/frontend/Genmato/default/en_US/css/sanple.css" changed. 
>> File “pub/static/frontend/Genmato/default/en_US/css/styles-1.css" changed. 
(Completed in @.008s at Tue Feb 16 2016 12:44:18 G4T+0108 (CET) - Waiting... 








10. The live reload plugin will detect the changed CSS files and reload and apply them in 
your browser without reloading the page, which should now display the new color for 
the navigation background: 


Default welcome msg 


The Grunt watch command looks for changes made to the Less files in the template directory. 
When a change is detected, it will trigger the recompilation of the CSS files of the theme. To 
see what files Grunt is watching, you can run the watch command with the -v option: 





grunt watch -v 


This will display all modules loaded and give you more debugging information for which file 
has been changed and the actions that it is running. 
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When using the Grunt method and deploy feature in Magento in the same setup, make sure 
that you run the command starting from step 5 again; otherwise, the file changes will not 
be detected. 


LiveReload 


When using the LiveReload plugin, it will create a web socket connection to the LiveReload 
service running on TCP port 35729. Through this socket, Grunt will notify when the 
compilation of the CSS file is completed and what file has changed so that the LiveReload 
plugin can reload that file and apply it in the browser: 





Execution Time (2016-02-17 10:23:47 UTC) 

loading tasks 762s a 7% 
loading grunt-contrib-less 337ms BENENE 3% 
lLess:genmato 9.8s 
Total 10.9s 


20% 





Live reloading pub/static/frontend/Genmato/default/en_US/css/styles-m.css... 
|Completed in 12.109s at Wed Feb 17 2016 11:23:58 @MT+0100 (CET) - Waiting... 
> File "pub/static/frontend/Genmato/default/en_US/css/styles-m.css" changed. 
> File “pub/static/frontend/Genmato/defoult/en_US/css/styles-l.css" changed. 
Live reloading pub/static/frontend/Genmato/default/en_US/css/styles-L.css... 
ee in @.@@8s at Wed Feb 17 2016 11:23:59 GMT+010@ (CET) - Waiting... 











Adding static blocks to pages through 


layout XML 





With static blocks, it is possible to add content to pages that you can manage through the 
Magento backend. There are two ways to add a static block to your page. In this recipe, 
we will see how to add a static block through layout XML. 


Getting ready 


To add a static block to a page, you need to know on which page you want this block to be 
displayed and in what block or container. 


How to do it... 


This recipe shows you how to add a static block to the footer on all pages, based on the theme 
created in the Creating a new theme recipe of this chapter: 


1. Create a new static block through the Magento backend. Go to the Content menu 
option and select Blocks under the Elements menu. Next, click on the Add New 
Block button to create a new block. Create the block with the content you want and 
click on Save Block: 
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General Information 
Block Title * | Sample Footer content 
Identifier * | footer-sample 


Store View * | All Store Views @ 
Main Website 
Main Website Store 
Default Store View 


Status * | Enabled X 


Content * | Show/Hide Editor 





= | Styles v Paragraph ~ FontFamily ~ Font Size X 
=E e | LEFJOm|J A-Y- 
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it alal F118 


Footer static block 








To add this block to the footer of your theme on all pages, it should be added to the 
Magento Theme default .xml layout file: 


app/design/frontend/Genmato/default/Magento_Theme/layout/ 
default .xml 


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento: framework: 
View/Layout/etc/page_configuration.xsd"> 
<body> 
<referenceBlock name="logo"> 
<arguments> 
<argument name="logo file" 
xsi:type="string">images/genmato.svg</argument > 
<argument name="logo_ img width" 
xsi:type="number">372</argument > 
<argument name="logo img height" 
xsi:type="number">84</argument> 
</arguments> 
</referenceBlock> 
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<referenceBlock name="report.bugs" remove="true"/> 
<referenceContainer name="footer"> 
<block class="Magento\Cms\Block\Block" 
name="footer-sample"> 
<arguments> 
<argument name="block_id" 
xsi:type="string">footer-sample</argument > 
</arguments> 
</blocks 
</referenceContainer> 
</body> 
</page> 


3. After uploading the file to your Magento installation, refresh the cache: 


bin/magento cache:clean 


4. Open your browser and (re)load the website to check whether your content is now 
visible on the website. 


The code in this recipe adds the created block to the referenced footer container; here, we 
add a new block with the Magento\Cms\Block\Block class and pass an argument with 
block_id of the created block. The block_id specified must match the Identifier used 
when creating the block. 


Adding a block to a single page 


To add a block to a single page, for example, before the Contact Us form, create a new file, 
app/design/frontend/Genmato/default/Magento_ Contact/layout/contact_ 
index _index.xml, and add the following content: 


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento: framework: 
View/Layout/etc/page_configuration.xsd"> 
<body> 
<referenceContainer name="content"> 
<block class="Magento\Cms\Block\Block" name="contact-sample" 
before="contactForm"> 
<arguments> 
<argument name="block_id" xsi:type="string">[your block 
identifier] </argument> 
</arguments> 
</blocks 
</referenceContainer> 
</body> 
</page> 
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In order to have the created block before the form, we reference the content area and add 
the block with specifying the before argument. 


Adding static blocks to pages through 





widgets 


Adding a static block to a page can also be done with the Magento widgets system; this allows 
you to add blocks to pages without the knowledge of how layout XML works. 


How to do it... 


In this recipe, we will see step by step how to add a static block to the home page: 


1. Create a new static block through the Magento backend. Go to the Content menu 
option and select Blocks under the Elements menu. Next, click on the Add New 
Block button to create a new block. Create the block with the content you want and 
click on Save Block: 





General Information 


Block Title * | Sample Homepage 


Identifier * | sample-homepage 


Store View * | All Store Views Q 
Main Website 
Main Website Store 
Default Store View 


Status * | Enabled v 


Content * Show / Hide Editor 


HAB Z U ae ~ Paragraph ~ FontFamily ~ FontSize ~ 
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Sample homepage content 
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2. Create a new widget. Go to the Content menu option and select Widgets under the 
Elements menu. Next, click on the Add Widget button to create a new widget. Select 
the CMS Static Block option for the Type field and the theme that you want to apply 
this widget to under Design Theme. After this, click on the Continue button: 





Widgets Q 4 Amo 


€ Back Reset 


WIDGET 
Settings 





Settings 7 





Type * | CMS Static Block a 











Design Theme * |M2 Cookbook Sample Theme X 


Continue 








3. Specify the Widget Title, Assign to Store Views, and Sort Order properties: 





Storefront Properties 


Type 


Design 
Package/Theme 


Widget Title * | Sample content 


Assign to Store . | Aii Store Views Q 
MNS Main Website 
Main Website Store 
Default Store View 
Sort Order 1 


Sort Order of widget instances in the same container 
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4. Specify the layout options; here, we configure the page and container where the 
content must be visible. It is possible to select multiple locations for the same block: 





Layout Updates 


Display on | Specified Page v 


Page Container Template 


CMS Home Page . [Main Content Area | a | CMS Static Block Default 
Template 








Add Layout Update 











5. The last step is to select the block to display. For this, go to the Widget Options tab 
and click on the Select Block button. From the list shown, you can now select the 
block that you want to add: 





Widget Options 


Block * Sample Homepage 


Select Block... 











6. Refresh the cache: 


bin/magento cache:clean 


7. Refresh the home page and check whether the created block is shown. 


The widget created will build the layout XML for the details that you have selected and will be 
loaded from the database while generating the layout. It is possible to add multiple Layout 
Updates and select multiple locations where the widget should be shown. 
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Available widgets 
By default, Magento ships with the following widgets: 


CMS Page Link 


The CMS Page Link widget will allow you to add a link to a page that you specify; this can be 
useful to add a link to the footer. 


CMS Static Block 


The CMS Static Block widget will add a static block to the location that you specify (as shown 
in this recipe). 


Catalog Category Link 
The Catalog Category Link widget adds a link to a specific category that you specify. 


Catalog New Products List 


The Catalog New Products List widget allows you to add a list of products to a page; here, you 
can select the amount of products that you want to show and if you want to display only new 
products or all products. 


Catalog Product Link 
With the Catalog Product Link widget, it is possible to create a link to a specific product. 


Catalog Product List 


To display a list of products on your page, you can use the Catalog Product List widget. 
With this widget, you can control the products shown based on your own conditions 
(product attributes). 


Orders and Returns 


This will add a block to allow customers to search for their orders and view the status or 
request for a return (Enterprise). 


Recently Compared Products 
This will add a block that shows the products that are added to the compare products list. 


Recently Viewed Products 
This will add a block that shows the products that have been viewed by the user. 
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Using a dynamic serving theme based on 


the client browser 





Using a responsive theme allows you to build a single theme that has the same look and 
feel through all devices and will also generate more traffic and slower loads on devices with 
a smaller viewport if you don't want to show the same information to them. With dynamic 
serving, you can assign a custom theme with your own layout configuration based on the 
User-Agent string that is sent by the client browser. This allows you to show only the content 
that is relevant to that user's device; this can be useful for images shown on the home page 
and also with the way you display your product details. 


Getting ready 


In order to use dynamic serving, you must first know what devices you want to show a 
different layout for. 


How to do it... 


In this recipe, we will see how to create a new theme that depends on the theme created in 
the Creating a new theme recipe of this chapter. Remove the desktop definition CSS and show 
this theme to users of the iPhone only. 


1. Create the theme definition file: 


app/design/frontend/Genmato/mobile/theme. xml 


<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema- 
instance" xsi:noNamespaceSchemaLocation= 
"urn:magento:framework: Config/etc/theme.xsd"> 
<title>M2 Cookbook Sample Mobile Theme</title> 
<parent >Genmato/default</parent> 
<media> 

<preview_image>media/preview.png</preview_image> 

</media> 

</theme> 


2. Create preview. png for how your theme will look. (This file needs to be present but 
you can start with a blank file and replace this later when your theme is done.) Place 
this preview image under app/design/frontend/Genmato/mobile/media/. 


3. To install the theme through Composer, we need to create a composer. j son file: 
app/design/frontend/Genmato/mobile/composer.json 


{ 


"name": "genmato/mobile-theme", 
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"description": "Genmato Sample Mobile Theme", 
"require": { 
"php": "~5.5.0|~5.6.0|~7.0.0", 
"genmato/default-theme": "1.0.¥*", 
"magento/framework": "100.0.*" 
}, 
"type": "magento2-theme", 
"version": "1.0.0", 
"license": [ 
"OSL-3.0", 
"AFL-3.0" 
l; 
"autoload": { 
"Files": [ 
"registration.php" 


} 


In order to register the theme when loaded through Composer, it needs 
registration. php: 


app/design/frontend/Genmato/mobile/registration.php 


<?php 

\Magento\Framework\Component \ComponentRegistrar: :register ( 
\Magento\Framework\Component \ComponentRegistrar: : THEME, 
'frontend/Genmato/mobile, 


Create a static file directory structure in your theme: 


app/design/frontend/Genmato/mobile 


web/ 
web/css/source/ 
web/fonts/ 
web/images/ 
web/js/ 
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Remove the desktop CSS file as specified by the parent blank theme: 


app/design/frontend/Genmato/mobile/Magento_Theme/layout/ 
default_head_blocks.xml 


<?xml version="1.0"?> 
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento: framework: 
View/Layout/etc/page_configuration.xsd"> 
<head> 
<remove src="css/styles-l.css"/> 
</head> 


</page> 


Add a custom static block to the mobile home page: 


app/design/frontend/Genmato/mobile/Magento_Cms/layout/cms_ 
index _index.xml 


<?xml version="1.0"?> 
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento: framework: 
View/Layout/etc/page_configuration.xsd"> 
<body> 
<referenceContainer name="content"> 
<block class="Magento\Cms\Block\Block" 
name="homepage-content"> 





<arguments> 
<argument name="block_ id" 
xsi:type="string">sample-homepage</argument > 
</arguments> 
</block> 
</referenceContainer> 
</body> 
</page> 


After uploading the files to your Magento installation, refresh the cache to load the 
new theme: 


bin/magento cache:clean 
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9. Inthe Magento backend, navigate to the store theme configuration: 
Stores | Configuration | [General] Design. 


Here, we can create the design exception based on the user agent that is sent by the 
browser: 





Design Theme 


Design Theme | M2 Cookbook Sample Theme v 


If no value is specified, the system default will be used. The 
system default may be modified by third party extensions. 


User-Agent Exceptions Search Q 
String Design Theme Action 
-- No Theme -- 
iphone ¥ M2 Cookbook Sample Mobile Theme 
M2 Cookbook Sample Theme 
Magento Blank 
Add Magento Luma 


Search strings are either normal strings or regular 
exceptions (PCRE). They are matched in the same order as 
entered. Examples: 

Firefox 

/*mozilla/i 











10. After saving the configuration, the cache must be refreshed again: 


bin/magento cache:clean 


11. Now, the theme shown should be different when the website is accessed through an 
iPhone and normal browser on your desktop. 


During the page load process, the theme for the request is selected. When a User-Agent 
exception is found, the Magento\Framework\View\DesignExceptions Class' 
getThemeByRequest method will check whether it matches the User-Agent sent by the 
client. If there is a match found, the theme specified will be used; otherwise, the default 
theme will be used. 


The mobile theme used in this recipe only has a small number of changes; you can further 
optimize your theme by optimizing every page and removing components that aren't 
necessary to be displayed on the device that the theme is designed for. 





[212] 


Chapter 6 





Creating theme-specific translations 





Magento offers a powerful system to translate strings used in templates, e-mails, and other 
components. There are several locations where you can place translations; they are loaded in 
the following order: 

1. Magento database (inline translations). 
Theme translations located in <theme>/i18n/<locale>.csv. 
Parent theme translations (until no further parent is specified). 


Translation packages located in app/i18n/<locale>. 


OF Be Qe 


Module translations located in <module>/il18n/. 


Getting ready 


In this recipe, we will change a translation for the en_US language; if you want, you can add 
other languages to your theme also. 


How to do it... 


This recipe will use the theme created in the Creating a new theme recipe of this chapter, but 
you can apply it to your own custom theme also. 


1. Create your local translations file: 
app/design/frontend/Genmato/default/i1l8n/en_US.csv 


"Add to Cart", "Buy" 


2. After uploading the file to your Magento installation, refresh the cache: 


bin/magento cache:clean 
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3. 





If you now reload the page, the new translation should be visible: 


Pursuit Lumaflex™ Tone J Pursuit Lumaflex™ Tone 
Band Band 


kk kk 


€16.00 
IN STOCK 


Qty 





€16.00 
SKU 24-UG02 INSTOCK SKU 24-UG02 


Qty 


In Magento, all translatable strings are used in the following ways: 


> 


Template files ( . phtm1): 


<?php echo _ ('[text to translate]') ?> 


UI component templates: 


<span data-bind="i18n: '[text to translate] '"></span> 


XML files: 

<item name="label" xsi:type="string" translate="true">[text to 
translate] </item> 

JavaScript files: (To use translations in JavaScript files, you need to include the mage/ 
translate module through RequireJS.) 


define (['jquery', 'mage/translate'], function ($) {...}); 


Next, you can use the translation in your script: 


$.mage.  ('<text to translate>'); 


The translation files in the theme are stored as a comma-separated file, where you can specify 
the original word/phrase and translation in the following format: 


"Toriginal string]","[translation]" 
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It is important that you place only a single translation on a line. Additionally, the original string 
must match the case; otherwise, no translation can be done. 


Some translations use dynamic values in the translation; these translations are created with 
%x (where x is a number) in the string: 


"Quantity was recalculated from %1 to %2","Quantity was 
recalculated from %1 to %2" 


Generating a translation file 


In Magento 2, there is now an easy option to generate a translation file for your theme 
or module. To generate the custom translations file for your theme, you can use the 
following command: 


bin/magento i18n:collect-phrases -output=" 
/app/design/frontend/Genmato/default/il8n/en_US.csv" 
app/design/frontend/Genmato/default 


This command will output only translatable strings that are used in your template. It will not 
include files from your parent theme(s) or module template files. The generated file can now 
be edited and, if necessary, you can add extra lines with translations for phrases that are not 
used in your own theme but you still want to translate. 
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Extensions - the Basics 


In this chapter, we will cover the basics on how to create your own Magento 2 extensions with 
the following recipes: 


> 


> 


> 


Initializing extension basics 

Working with database models 

Creating tables using setup scripts 

Creating a web route and controller to display data 
Creating system configuration fields 

Creating a backend data grid 

Creating a backend form to add/edit data 


Introduction 


Now that we have installed and configured Magento 2, we will see the basics on how to create 
a new Magento 2 extension. If you are familiar with creating an extension for Magento 1.x, 

you will notice that there are some concepts that look a Iot like how it is done in Magento 1. 
However, as the code is a completely new framework, there are also lots of changes in the 
module structure and necessary files. 


Some of the major changes that change the way a extension is created are as follows: 


> 


A new module structure: The directory structure has changed, moving all parts of 
an extension into a single container, and files are no longer spread between different 
locations. This makes it easier to maintain an extension. 
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» Configuration files: In Magento 2, the configuration of an extension is split into 
multiple smaller files that are validated by an XML Schema Definition (XSD) schema. 
Additionally, some configuration files can be area-specific (adminhtml, frontend, cron, 
and api) to overwrite the general settings. 


>» Namespaces and dependency injection: In Magento 2, the code uses PHP 
namespaces to identify class names. Additionally, classes necessary are no longer 
loaded through Mage: :getModel () (or similar functions), but injected into your 
class through a dependency injection. 





Initializing extension basics 


The way in which a new extension is built in Magento 2 is a bit different than it was in 
Magento 1. The major change is that all files are now included in the extension directory. 
This makes it easier to manage and remove. 


The location of an extension is also different; there are no longer separate codepools as used 
in Magento 1 (core, community, and local). Depending on the way the extension is installed, 
the extension will be running from the vender directory when installed through Composer. For 
project-specific extensions, it is also possible to place them in app/code. 


Getting ready 


When developing an extension, it is advised to run Magento 2 in developer mode as this will 
give better error messages explaining what went wrong and make debugging a lot easier. 


To display all PHP errors and activate developer mode, activate the display_errors setting 
in app/bootstrap.php and run the following command: 


bin/magento deploy:mode:set developer 


The code used in this chapter is based on naming the module Genmato_Samp1e and all files 
will be placed in the following: 


app/code/Genmato/Sample/ 


How to do it... 


Follow these steps to initialize a new extension: 
1. Create the module initialization file: 
etc/module.xml: 


<?xml version="1.0"?> 


<config xmlns:xsi="http://www.w3.org/2001/ 
XMLSchema-instance" xsi:noNamespaceSchemaLocation= 








"urn:magento: framework :Module/etc/module.xsd"> 





<module name="Genmato_Sample" setup _version="0.1.3"> 
<sequence> 
<module name="Magento_Store"/> 
</sequence> 
</module> 
</config> 


Create the module registration file: 


registration.php 
<?php 


\Magento\Framework\Component \ComponentRegistrar: :register ( 
\Magento\Framework\Component \ComponentRegistrar: :MODULE, 
'Genmato_Sample', 


Create the module composer. json file: 


composer.json 


{ 


"name": "genmato/sample", 
"description": "Genmato Magento2 Sample extension", 
"keywords": ["magento2", "genmato", "m2sample"], 
"type": "magento2-module", 
"license": "OSL-3.0", 
"require": { 

"php": "~5.5.0|~5.6.0|~7.0.0" 


}, 


"autoload": { 


"files": [ "registration.php" ], 
"psr-4": { 
"Genmato\\Sample\\": "" 


} 


Enable the module with Magento. To do this, run the following command: 


bin/magento module:enable Genmato Sample 


Run the upgrade command to register the module: 


bin/magento setup:upgrade 
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The module declaration in step 1 registers the module in Magento; here, the version number 
and dependencies are also specified to manipulate the load order. The following XML nodes 
are available: 

>» Module name: Genmato Sample 


>» Setup version: 0.1.3 is used for the setup/upgrade scripts creating database 
schemas 


> Sequence: Here we can define the modules that this extension is depending on 
With the use of Composer, modules can be placed in two locations currently. In order for 
the autoloader to know what file to load when a class is instantiated, the path needs to be 
registered. Through registration.php from step 2, the (__DIR__) location is stored for a 
specified package. The registration can be done for the following types of packages: 

> MODULE: This is for extensions/modules 

> LIBRARY: This is for extensions that are used as a library 

> THEME: This is for themes 

> LANGUAGE: This is for language packs 


In order to use Composer to install the module, it is required to add a composer. json file to 
the module. The most important elements in this file are as follows: 


>» Name: The extension package name is in the format of <vendor 
name>/<extension name>; it is important to only use lowercase letters. 
This name is also used to install the extension through Composer. 


> Type: This defines the package type; the possible options are as follows: 
Q magento2-module: Extensions/modules 
Q magento2-theme: Themes 
Qa magento2-language: Language packages 
>» require: This defines the packages needed to be installed on the system for 
this package to work. During installation of the package, Composer will check the 


requirements and try to install the missing packages. When it's not possible to install 
them, the installation will fail. 


> Autoload: This element is to specify information that needs to be loaded through 
the Composer autoloader. 
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In order to install packages in your project, they have to be available for Composer to install. 
There are a few options available to install packages from: 


> 


Magento marketplace: Currently, installing Magento 2 through Composer is done 
from the Magento repository. In the future, paid and free modules/packages bought 
through the marketplace will be available through the same repository through your 
account. This will make installing and managing packages easy. 


From version control repository: For private packages that you use in your project, 
it is possible to install them directly from your version control repository; for this, you 
need to add the following to the composer. json file located in your Magento 2 
installation root: 


{ 
"repositories": [ 
{ 
"type" : "yes" 7 
"url": "https://github.com/ [github 
account] / [package] " 


} 


Packagist: For freely available packages, it is also possible to register them on 
Packagist, which is the default repository that is available in Composer to install 
packages. To add a Magento 2 extension to Packagist, you will need to store the 
extension in a public repository, which can be GitHub (http: //www.github.com) 
or BitBucket (http: //www.bitbucket.com). 


On Packagist, you can submit your package by specifying your extension 
repository URL: 


Packagist The PHP Package Repository 


Search packages... 





Submit package 





Repository URL (Git/Svn/Hg) 


git@github.com:Genmato/M2_Sample.git| 
Check 
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Every package is now installable by running the following command in your Magento 2 
installation root: 


composer require <vendor-name>/<module-name> 


Working with database models 


Storing data in a database table is handled through a Model class; this model holds the data. 
While saving the data, a ResourceMode!l is used, and this class is the link between the 
Model and database table, and all CRUD operations go through the ResourceModel. When 
loading a set of records, a Collection is used; it is possible to apply filters to this collection. 


Getting ready 


Using database models requires that the module configuration is done correctly; otherwise, 
the autoloader won't be able to find the files to load. 


How to do it... 


The following steps in this recipe will add the database models to your module: 


1. Create the Model class: 
Model /Demo. php 


<?php 
namespace Genmato\Sample\Model ; 
use Magento\Framework\Model\AbstractModel ; 
class Demo extends AbstractModel 
l [** 
* Initialize resource model 
* @return void 


*/ 
protected function _construct () 
{ 
Sthis-> init ('Genmato\Sample\Model\ResourceModel \ 
Demo') ; 








Create the ResourceModel class: 


Model /ResourceModel/Demo. php 


<?php 

namespace Genmato\Sample\Model\ResourceModel ; 

use Magento\Framework\Model\ResourceModel\Db\AbstractDb; 
class Demo extends AbstractDb 


{ 





[** 

* Initialize resource model 

* @return void 

aA 

protected function _construct () 


{ 


Sthis->_init('genmato demo', 'demo id') ; 


} 


Create the Collection class: 


Model /ResourceModel/Demo/Collection.php 


<?php 
namespace Genmato\Sample\Model\ResourceModel\Demo ; 


use Magento\Framework\Model \ResourceModel\Db\Collection\ 
AbstractCollection; 


class Collection extends AbstractCollection 


{ 





[** 

* @var string 

*/ 

protected $ idFieldName = 'demo id'; 


[** 
* Define resource model 
* @return void 
*/ 
protected function _construct () 
Sthis-> init ('Genmato\Sample\Model\Demo', 
'Genmato\Sample\Model\ResourceModel\Demo' ) ; 
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The Model class specifies the used ResourceModel in the constructor through the init () 
function. When the save () function is called on a Mode1, it will call the save () function on 
the ResourceModel; see the save () function in AbstractModel that is extended: 





[** 

* Save object data 

* 

* @return $this 

* @throws \Exception 

*/ 

public function save () 

Sthis-> _getResource() ->save(S$this) ; 
return $this; 


} 


Here, getResource() returns an instance of the class specified inthe init () function. 


In the ResourceModel class constructor, the _init () function is called to specify the 
genmato_demo database table and primary key in the demo_ id table. This will be used when 
creating the queries necessary to load or save the data. Depending on the action performed 
(save new, save existing, or delete), a corresponding query is generated using an INSERT, 
UPDATE, or DELETE query. This is handled by the framework and is built (currently) on the 
Zend Db Adapter Pdo Mysql class. 


Inthe Collection class, both Model and ResourceModel are specified in the init () 
function. ResourceModel is necessary to connect to the database and load the records 
from the right database table, allowing you to use filters to select the records necessary. The 
collection is then represented as an array of Models to allow all functionality available to 
models (magic getters/setters, adding data, and delete/save). 


Creating tables using setup scripts 


When using database models, as explained in the previous recipe, the corresponding tables 
needs to be created during setup. These operations are placed in setup scripts and executed 
during the installation of an extension. 
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Getting ready 


While running the installation of a module, there are four files executed to create schemas 
and insert data. To create schemas, the files used are as follows: 


Setup/InstallSchema. php 
Setup/UpgradeSchema. php 


The installation file is executed only when there is no record in the setup_module table 
for the module. The upgrade file is executed only when the current version number in the 
setup_module table is lower than the version configured in your etc/module.xml1 file. 


When it's necessary to insert default values into a table or new EAV attributes need to be 
created, these actions need to be configured in the following files: 


Setup/InstallData.php 
Setup/UpgradeData. php 


Magento keeps track of which version is installed for an extension in the setup_module 
table; here, the current installed version for the schema and data is stored: 





| objects | A setup_module @magento2rc (L... @ 

module schema_version data_version 

> Genmato_Sample 0.1.3 0.1.3 
Magento_AdminNotification 2.0.0 2.0.0 
Magento_AdvancedPricingimportExport 2.0.0 2.0.0 
Magento_Authorization 2.0.0 2.0.0 
Magento_Authorizenet 2.0.0 2.0.0 
Magento_Backend 2.0.0 2.0.0 











How to do it... 


Follow these steps to create your database tables: 


1. The following is the table schema installation: 


Setup/InstallSchema. php 


<?php 
namespace Genmato\Sample\Setup; 


use Magento\Framework\Setup\InstallSchemaInterface; 
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use Magento\Framework\Setup\ModuleContextInterface; 
use Magento\Framework\Setup\SchemaSetupInterface; 
use Magento\Framework\DB\Adapter\AdapterInterface; 


class InstallSchema implements InstallSchemaInterface 


{ 


public function install (SchemaSetupInterface $setup, 
ModuleContextInterface $context) 


Sinstaller = $setup; 


Sinstaller->startSetup() ; 


[** 
* Create table 'genmato_demo' 
+1 
Stable = Sinstaller->getConnection() ->newTable ( 
Sinstaller-sgetTable('genmato_demo') 
) ->addColumn ( 
'demo_id', 
\Magento\Framework\DB\Dd1\Table: :TYPE_SMALLINT, 
null, 
['identity' => true, 'nullable' => false, 'primary' 
=> true], 
'Demo ID! 
) ->addColumn ( 
MoTeELe*; 
Magento\Framework\DB\Ddl\Table: :TYPE TEXT, 


'nullable' => false], 
Demo Title' 
) ->addColumn ( 
'‘creation_time', 
\Magento\Framework\DB\Dd1\Table: : TYPE TIMESTAMP, 
null, 
[l], 
'Creation Time' 
) ->addColumn ( 
‘update_time', 
\Magento\Framework\DB\Dd1\Table: : TYPE TIMESTAMP, 
null, 
Els; 
'Modification Time' 
) ->addColumn ( 


\ 
255, 
[ 
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‘is active', 
\Magento\Framework\DB\Dd1\Table: :TYPE_SMALLINT, 
null, 
['nullable' => false, 'default' => '1'], 
'Is Active! 
) ->addIndex ( 
$setup->getIdxName ( 
Sinstaller-sgetTable('genmato_demo'), 
['title'], 
AdapterInterface: :INDEX_TYPE_ FULLTEXT 
), 
['title'], 
['type' => AdapterInterface: : INDEX TYPE FULLTEXT] 
) ->setComment ( 
"Demo Table' 
); 
Sinstaller->getConnection()->createTable (Stable) ; 


Sinstaller->endSetup() ; 


} 
} 


2. Trigger the execution of the setup scripts: 


bin/magento setup:upgrade 


In Magento 2, the running of the setup scripts is no longer triggered by the first request after 
flushing the cache; to initiate the running of these scripts, run the command specified in step 
2. When running the upgrade command, all modules are evaluated on their current version 
and module version in the configuration file. First, all schema installations/updates are 
executed, and next, the data installations/updates are processed. 


The InstallData and InstallSchema files are executed only when there is no prior 
registration of the extension in the setup_module table. To run the installation files during 
testing, it is possible to remove the module row from the table and run the bin/magento 
setup: upgrade command. 
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The available methods to create a new table are defined in the Magento\Framework\DB\ 
Adapter\AdapterInterface\Table class and are as follows: 


> addColumn: This adds a new column to the table; this method has the following 
parameters: 


Q 


Q 


name: This is the name of the table 


type: This is the table type; the available column types are 
defined as constants in the Magento\Framework\DB\Adapter\ 
AdapterInterface\Table class as TYPE *: 


TYPE BOOLEAN 





TYPE SMALLINT 
TYPE INTEGER 
TYPE BIGINT 
TYPE FLOAT 
TYPE NUMERIC 
TYPE DECIMAL 
TYPE DATE 

TYPE TIMESTAMP 





TYPE DATETIME 
TYPE TEXT 


TYPE BLOB 





TYPE VARBINARY 


size: This specifies the size of the column 





options: This is used to specify extra column options; the available options 
are as follows: 


unsigned: This is only for number types; allows True/False (default: False) 


precision: This is only for decimal and numeric types (default: calculated 
from size parameter or O if not set) 


scale: This is only for decimal and numeric types (default: calculated from 
size parameter or 10 if not set) 


default: The default value is used when creating a new record 
nullable: In case a column is NULL (default: True) 
primary: This makes a column a primary key 


primary position: This is only for primary keys and sets the sort order 
for the primary keys 
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identity/auto_increment: This auto-increments a column on inserting 
a new record (used to identify a unique record ID) 


a comment: This is the description of the column 
>» addForeignkey: This adds a foreign key relation to another table; the parameters 
allowed are as follows: 
u fkName: This is the name of the foreign key 
a column: This is the column used as the foreign key 
a  refTable: This is the table where the key references to 
Qa  xrefColumn: This is the column name in the referenced table 


a onDelete: This sets the action to be performed when deleting a record; the 
available options are (constants as defined in Magento\Framework\DB\ 
Adapter\AdapterInterface\Table): 


ACTION CASCADE 
ACTION RESTRICT 
ACTION SET DEFAULT 
ACTION SET NULL 
ACTION NO ACTION 
>» addIndex: This adds a column to the search index; the available parameters are as 
follows: 
a indexName: This is the name used for the index 


a fields: These are the column(s) used for the index (can be a single column 
or an array of columns) 


Q options: This is an array with extra options; currently, only the option type is 
used to specify the index type 


When changing an existing table, it is possible to use the following methods; these are the 
methods that can be used directly on the $installer->getConnection() class: 


>»  dropTable: This removes a table from the database; the available parameters are 
as follows: 
a tableName: This is the name of the table to delete 


a  schemaName: This is the optional schema name used 
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>» renameTable: This renames a table from the database; the available parameters 
are as follows: 
aū oldTableName: This is the current name of the table 
Q newTableName: This is the new name for the table 
a schemaName: This is the optional schema name 
>» addColumn: This adds an extra column to a table; the available parameters are as 
follows: 
aū  tableName: This is the name of the table to alter 
Qa  columnName: This is the name of the new column 
a definition: This is an array with the following parameters: 
Type: Column type 
Length: Column size 
Default: Default value 
Nullable: If a column can be NULL 
Identify/Auto_Increment: Used as an identity column 
Comment: Column description 
After: Specify where to add the column 
a  schemaName: This is the optional schema name 
>» changeColumn: This changes the column name and definition; the available 
parameters are as follows: 
Q tableName: This is the name of the table to change 
Qa oldcolumnName: This is the current column name 
a newColumnName: This is the new name for the column 


a definition: This is the table definition; see addColumn for available 
values 


a  flushData: This flushes the table cache 
a  schemaName: This is the optional schema name 
> modifyColumn: This changes the column definition; the available parameters are as 
follows: 
aū  tableName: This is the name of the table 
Qa  columnName: This is the column name to change 


a definition: This is the table definition; see addColumn for available 
values 








> 
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a flushData: This flushes the table cache 

a schemaName: This is the optional schema name 
dropColumn: This removes a column from the table; the available parameters are as 
follows: 

Q tableName: This is the name of the column 

Q columnName: This is the name of the column to remove 


a  schemaName: This is the optional schema name 


addIndex: This adds a new index; the available parameters are as follows: 
Q tableName: This is the name of the table to change 
a indexName: This is the name of the index to add 
a fields: These are the columns to be used as the index 


a indexType: This is the type of index; the available options (constants 
defined in (Magento\Framework\DB\Dd1\Table\AdapterInterface) 
are as follows: 


INDEX TYPE PRIMARY 
INDEX TYPE UNIQUE 
INDEX TYPE INDEX 





INDEX TYPE FULLTEXT 

a schemaName: This is the optional schema name 
dropIndex: This removes an index from a table; the available parameters are as 
follows: 

aū  tableName: This is the name of the column 

a  indexName: This is the name of the index 

a schemaName: This is the optional schema name 
addForeignkey: This adds a new foreign key; the available parameters are as 
follows: 

a f£kName: This is the name of the foreign key 

u  tableName: This is the name of the table 

Qa  columnName: This is the name of the column used in the foreign key 

a xrefTableName: This is the name of the referenced table 

a xrefColumnName: This is the name of the referenced column 


a  onDelete: This is the action to perform on delete (See the preceding 
addForeignkey description for available options) 
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u purge: This removes invalid data (default: false) 
a  schemaName: This is the optional schema name 


a refSchemaName: This is the option-referenced schema name 


When, in a later version of the extension, there are extra fields necessary (or the current fields 
need to be changed), this is handled through the UpgradeSchema function, upgrade: 


Setup/UpgradeSchema. php 


<?php 
namespace Genmato\Sample\Setup; 


use Magento\Framework\DB\Dd1\Table; 

use Magento\Framework\Setup\UpgradeSchemalInterface; 
use Magento\Framework\Setup\ModuleContextInterface; 
use Magento\Framework\Setup\SchemaSetupInterface; 


class UpgradeSchema implements UpgradeSchemaInterface 


{ 


public function upgrade (SchemaSetupInterface S$setup, 
ModuleContextInterface $context) 


{ 


Ssetup->startSetup() ; 


if (version_compare ($context->getVersion(), '0.1.1', '<')) { 





Sconnection = $setup->getConnection() ; 


Scolumn = [ 
'type' => Table::TYPE SMALLINT, 
'length' => 6, 
'nullable' => false, 
'comment' => 'Is Visible', 
'default' => '1' 
l; 
$connection->addColumn ($setup->getTable ('genmato_demo'), 
'is_visible', $column) ; 


Ssetup->endSetup() ; 
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As this file is run every time the module version is different than the currently installed 
version, it is necessary to check the current version that is installed to execute only the 
updates necessary: 


if (version_compare ($context->sgetVersion(), '0.1.1', '<')) { 


The preceding statement will make sure that the schema changes are executed only if the 
current version is less than 0.1.1. 


Data installation 


In order to provide default content during installation (this can be records in a table or adding 
extra attributes to some entity), the data installation function is used: 


Setup/InstallData.php 


<?php 
namespace Genmato\Sample\Setup; 


use Genmato\Sample\Model\Demo; 

use Genmato\Sample\Model\DemoFactory; 

use Magento\Framework\Setup\InstallDataInterface; 

use Magento\Framework\Setup\ModuleContextInterface; 
use Magento\Framework\Setup\ModuleDataSetupInterface; 





class InstallData implements InstallDataInterface 


[** 
* Demo factory 
* 


* @var DemoFactory 
a 


private $demoFactory; 


[** 

* Init 

* 

* @param DemoFactory $demoFactory 

*/ 

public function __ construct (DemoFactory $demoFactory) 


{ 


Sthis->demoFactory = $demoFactory; 


[** 
* {@inheritdoc} 
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* @SuppressWarnings (PHPMD.ExcessiveMethodLength) 
*/ 
public function install (ModuleDataSetupInterface $setup, 
ModuleContextInterface $context) 
S$demoData = [ 
'title' => 'Demo Title', 


‘is active' => 1, 
l; 
[** 
* Insert demo data 
*/ 


Sthis->createDemo () ->setData (S$demoData) ->save() ; 


[** 
* Create demo 
* 


* @return Demo 
zy 


public function createDemo () 


{ 


return $this->demoFactory->create(); 


} 


In this example, there is one record created in the table created during setup. For this, the 
DemoFactory Class is injected through dependency injection into the constructor function 
of this class. DemoFactory is an automatically created class that allows you to instantiate a 
class (in this case, Genmato\Sample\Model\Demo) without injecting this directly into the 
constructor. Here, this is done in the createDemo function: 


Sthis->demoFactory->create() ; 


Similar to SchemaUpgrade, there is also a DataUpgrade option to insert data while 
upgrading to a newer version. 
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Creating a web route and controller to 





display data 


In order to display data from your extension on the frontend (the public part of the website), 
the following is necessary: 


>» A configured route 

>»  Acontroller handling the request 

>» A layout file to specify what to show 

» The block class as specified in the layout file 
>» Atemplate file (optional) 


How to do it... 


Follow these steps to extend your module with a frontend web route and output data from a 
template file: 


1. Create a route in the frontend area: 


etc/frontend/routes.xml 


<?xml version="1.0"?> 
<config xmlns:xsi="http://www.w3.org/2001/ 
XMLSchema-instance" xsi:noNamespaceSchemaLocation= 
"urn:magento:framework:App/etc/routes.xsd"> 
<router id="standard"> 
<route id="sample" frontName="sample"> 
<module name="Genmato_ Sample" /> 
</route> 
</router> 
</config> 


2. Create the controller that handles the request and renders the output: 


Controller/Index/Index.php 


<?php 
namespace Genmato\Sample\Controller\Index; 
use Magento\Framework\App\Action\Action; 


class Index extends Action 


[** 
* @var \Magento\Framework\View\Result\PageFactory 
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*/ 
protected $resultPageFactory; 


[** 

* @param \Magento\Framework\App\Action\Context $context 

* @param \Magento\Framework\View\Result\PageFactory 
resultPageFactory 


*/ 
public function _ construct ( 
\Magento\Framework\App\Action\Context $context, 


\Magento\Framework\View\Result \PageFactory 
SresultPageFactory 


Sthis->resultPageFactory = $resultPageFactory; 


parent:: construct ($context) ; 
[** 
* Renders Sample Index 


*/ 
public function execute () 


{ 


return $this->resultPageFactory->create() ; 


} 
3. Create the layout file to specify what to display: 


view/frontend/layout/sample_index_index.xml 


<?xml version="1.0"?> 
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
layout="l1column" xsi:noNamespaceSchemaLocation= 
"urn:magento: framework: View/Layout/etc/ 
page_configuration.xsd"> 
<head> 
<title>Sample DemoList</title> 
</head> 
<body> 
<referenceContainer name="content"> 
<block class="Genmato\Sample\Block\DemoList" 
name="demoList" template= 
"Genmato Sample::list.phtml" /> 
</referenceContainer> 
</body> 
</page> 
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In order to show the data, the Block class is called to render the template specified: 
Block/DemoList .php 


<?php 
namespace Genmato\Sample\Block; 


use Magento\Framework\View\Element\Template; 


use Genmato\Sample\Model\ResourceModel\Demo\Collection as 
DemoCollection; 


use Magento\Store\Model\ScopeInterface; 


class DemoList extends Template 
[** 
* Demo collection 
* 
* @var DemoCollection 
*/ 


protected $ demoCollection; 


[** 

* Demo resource model 

* 

* @var \Genmato\Sample\Model\ResourceModel\Demo\ 
CollectionFactory 

*/ 

protected $ demoColFactory; 


[** 
* @param Template\Context $context 


* @param \Genmato\Sample\Model\ResourceModel\Demo\ 
CollectionFactory $collectionFactory 


* @param array $data 
* @SuppressWarnings (PHPMD.ExcessiveParameterList) 
*/ 
public function __ construct ( 
Template\Context $context, 


\Genmato\Sample\Model\ResourceModel\Demo\ 
CollectionFactory $collectionFactory, 





array $data = [] 
peg 
Sthis-> demoColFactory = $collectionFactory; 
parent:: construct ( 
Scontext, 
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$data 
) ee 


[** 
* Get Demo Items Collection 
* @return DemoCollection 
*/ 
public function getDemoItems () 
{ 
if (null === $this-> demoCollection) { 
Sthis-> demoCollection = 
Sthis-> demoColFactory->create() ; 
} 


return Sthis-> demoCollection; 


} 
} 


5. Inthe template, the data collected in the Block class can be used to build the page: 


view/frontend/templates/list.phtml 


<table> 
<tr> 
<td>ID</td> 
<td>Title</td> 
</tr> 
<?php foreach ($block->getDemoItems() as $item): ?> 
<tr> 
td><?php echo Sitem->getId(); ?></td> 
td><?php echo S$item->getTitle() ;?></td> 
</tr> 
<?php endforeach; ?> 
</table> 


A 


A 





6. Refresh the cache to update the configuration: 


bin/magento cache:clean 
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In your browser, open http: // [your hostname] /sample/index/index/. This 
will result in the following page when you access the URL: 


© Luma 


What's New Women Men Gear Training Sale 





Sample DemoList 


Sample DemoList 
ID Title 


1 Demo Title 











If you have not set the deploy mode to developer, it is possible that 
`~ the accessed URL will not render. If this is the case, you need to run 
Q the compile command: 


bin/magento setup:di:compile 


When a request is received in the application, the path is evaluated and executed in the 
following order: 
1. A request is received by index.php. 
2. The index.php file creates a bootstrap: 
$bootstrap = \Magento\Framework\App\Bootstrap::create(BP, $_ 
SERVER) ; 
3. The bootstrap creates a new HTTP application: 
Sapp = S$bootstrap->createApplication('Magento\Framework\App\ 
Http'); 
4. The bootstrap application is started: 
Sbootstrap->run (Sapp) ; 
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5. Inthe run function of the bootstrap class, the created application is launched: 


Sresponse = Sapplication->launch() ; 


6. The application launch function will instantiate the frontcontroller and dispatch 
the request: 


$frontController = Sthis->_objectManager->get ( 
'Magento\Framework\App\FrontControlleriInterface') ; 
$result = $frontController->dispatch($this-> request) ; 


7. The frontcontroller loops through all the available configured controllers 
and checks whether there is a match. When a match is found, the controller is 
instantiated and the execute method is called: 


$result = SactionInstance->execute() ; 


8. This will evaluate the layout file for the route loaded and render the blocks that are 
specified there. 


To activate a route on the frontend, it needs to be configured by specifying the first part of the 
URL. This first part maps the request to the extension that will handle the request. 


Here, frontName (sample) is mapped to the extension, Genmato_Samp1e, allowing it to 
handle all requests on the frontend. 


In order to handle the request to a URL, there needs to be a controller. In Magento 2, the 
controller now handles only one action (whereas Magento 1 has a controller that has the 
option to handle multiple actions). Every request consists of three parts: 


[route] / [controller] / [action] 
[route]: This is the configured frontName 
[controller]: This is the path to identify the controller 
[action]: This is the action that is executed (the PHP class) 
In this case, a request is made to the following: 

http: //example.com/sample/ 
This will result with a request to the following: 

http: //example.com/sample/index/ index 
This will load the following file: 


Genmato\Sample\Controller\Index\ Index.php 
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The executed controller relies on the layout file to render the page by including the specified 
blocks in the page. Just like the controllers, the layout files are now separate files per page 
handle. The name of the file is built in the same way as the controllers: 


[route] [controller] [action] .xml 
This makes it easier to change a specific page handle in a theme. 


The loaded Block class is the location to handle the collection of the data necessary to be 
shown in the template (just like in Magento 1). Here, we load the collection from the database 
so that it can be used in the template. 


Creating system configuration fields 





In Magento, it is possible to store configuration values for global/website or store in the 
backend. These values can be used to store simple module settings such as API -keys, module 
enable/disable options, or any setting that you might require for your module. The data is 
stored in the core config data table. 


Getting ready 


As the configuration fields are only accessible through the backend web pages, the 
configuration file is stored in the etc/adminhtml directory. 


How to do it... 


Create your own configuration options with the following step: 


1. Create the system configuration file: 


etc/adminhtml/system.xml 


<?xml version="1.0"?> 
<config xmlns:xsi="http://www.w3.org/2001/ 
XMLSchema-instance" xsi:noNamespaceSchemaLocation= 
"urn:magento:module:Magento Config:etc/system_file.xsd"> 
<system> 
<section id="sample" translate="label" type="text" 
sortOrder="2000" showInDefault="1" showInWebsite="1" 
showInStore="1"5 
<label>Sample Configuration</label> 
<tab>general</tab> 
<resource>Genmato_Sample::config_sample</resource> 
<group id="demo" translate="label" type="text" 
sortOrder="100" showInDefault="1" showInWebsite="1" 
showInStore="1"5 
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<label>Sample</label> 

<field id="header" translate="label" type="text" 
sortOrder="1" showInDefault="1" showInWebsite="1" 
showInStore="1"5 
<label>Header Title</labels 

</field> 

<field id="selectsample" translate="label" 
type="select" sortOrder="2" showInDefault="1" 
showInWebsite="1" showInStore="1"> 


<label>Sample Select</label> 
<source model>Genmato\Sample\Model\Config\Source\ 
DemoList</source model> 
</field> 
</group> 
</section> 
</system> 
</config> 


The Magento store configuration is divided in separate sections and contains multiple 
groups of configuration fields. Every section is assigned to a main tab that is displayed 
above the sections. 


Creating a new tab 


When the configuration options that you want to add can't fit in one of the existing tabs, it 
is possible to add your own through the system. xm1 file. For this, add the following to your 
system configuration file: 


<tab id="<unique tab name>" translate="label" 
sortOrder="<sort order>" class="<class>"> 
<label>[label]</label> 

</tab> 


In the configuration, you can use the following attributes: 
>» id: This is a unique identifier for the tab, which is also used to reference to the tab in 
your sections 


> translate: This specifies the elements that need to be available for translation (in 
this case, only the label field is available) 


> sortOrder: This is the numeric value to use to sort the tabs 
>» class: This is the optional class name for your tab 


The label element is used as the visible name of the tab in the configuration; it is important to 
make it as descriptive as possible for customers to understand. 
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Creating a new section 


Every section is shown below the tab referenced in the configuration. In every section, multiple 
groups can be configured that can hold multiple fields. Adding a new section can be done by 
adding the following to your system. xml file: 


<section id="<unique_section_name>" translate="label" 
type="<text>" sortOrder="<sort order>" showInDefault="<0/1>" 
showInWebsite="<0/1>" showInStore="<0/15">5 
<class>[class]</class> 
<header_css>[header_css]</header_css> 
<label> [label] </label> 
<tab> [tab] </tab> 
<resource> [resource] </resource> 

</section> 


The attributes used are as follows: 


>» id: This is the unique section identifier 


>» translate: This specifies the elements that need to be available for translation (in 
this case, only the label field is available) 


> type: This is the type of field used (normally text) 

>» sortOrder: This is the numeric value to use to sort the sections 

>» showInDefault: This shows sections in the default store configuration 
>»  showInWebsite: This displays sections in the website configuration 

>» showInStore: This displays sections in the store configuration 


The available elements in this configuration are as follows: 


>» class: This is the class used for the section 

>» header_css: This is the CSS class to use in the text header for the section 
> label: This is the text to display in the section 

> tab: This is the reference to the tab where the section should be added 


>» resource: This is the access control list (ACL) resource referenced, which is used 
to check whether the user logged in has access to the section 
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Creating a new group 


In a section, it is possible to create multiple groups; they are displayed as separate fieldsets 
that can be expanded/collapsed and can hold one or multiple fields. To create a new group, 
add the following (in the section to hold the group) to the system. xml file: 


<group id="<group_id>" translate="label" type="text" 
sortOrder="<sort order>" showInDefault="<0/1>" 
showInWebsite="<0/1>" showInStore="<0/15"> 
<label> [label] </label> 


</group> 
The attributes to configure a group are as follows: 


>» id: This is the unique ID for the group (in the section) 


>» translate: These are the fields that needs to be translated, in this case, only the 
label option 


> type: This is the field type (text in this case) 

> sortOrder: This is the numeric value used to sort the groups 

>»  showInDefault: This shows a group in the default store configuration 
>»  showInWebsite: This shows a group in the website configuration 

>» showInStore: This shows a group in the store configuration 


The label element is shown as the heading of the group. 


Creating a new field 


Every group can have one or multiple fields. In the database, the configuration is stored as a 
path build, <section>/<group>/<field>. A new config field can be one of the following 
types: text input, textarea, select, multiselect, or a custom data renderer. To add a field, add 
the following to a group: 


<field id="<field_id>" translate="label" type="<type>" 
sortOrder="<sort order>" showInDefault="<0/1>" 
showInWebsite="<0/1>" showInStore="<0/1>"> 
<label> [comment] </label> 
<comment > [comment] </comment > 

</field> 


The attributes used for the field configuration are as follows: 


>» id: This is the unique ID of the field in the group 


>» translate: These are the fields that need to be translated (can be the label, 
comment, tooltip, or hint elements) 
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> type: This is the input type, which can be the following: 
a text: Default text input field 
a textarea: Text area input 
a obscure: Password input 
a select: Drop-down select 
This needs a source_model element to specify the available options 
to select. 
multiselect: This is the multiple item select box. This needs a source_model 
element to specify the available options to select. 
image: This is the image upload with a preview if the file is uploaded. This needs 
different backend_model (to store the uploaded file), upload_dir (to specify 
where to save the file), and base_ur1 (path used to build the URL to access from the 
frontend) elements. 
> sortOrder: This is the numeric value used to sort the fields in the group 
>» showInDefault: This shows fields in the default store configuration 
>» showInWebsite: This shows fields in the website configuration 
>» showInStore: This shows fields in the store configuration 


There are also some extra elements available to configure the field: 


> label: This is the label, which shows in front of the input field 

> comment: This is the comment shown below the input field 

> tooltip: This is the text shown when hovering the question mark 
>» frontend_class: This is the class used for the field 


>» frontend_model: This is the custom frontend model (block) that will be used to 
render the input area 


> backend_model: This is the backend model used when saving the data to process 
inserted values 


> source model: This is the data source used for select and multiselect fields 


>» depends: This is the option to hide/show a field based on a value used by another 
field, for example: 
<depends> 
<field id="[field_name_to_check]">[value_to show] </field> 
</depends> 


When [field_name_to_check] has the [value_to_show] value, the field will 
be visible, if it contains a different value, then the field is hidden for the user. 
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To get the data stored in the sample/demo/header field, add the following to the template 
Block class in our template block: 








Block/DemoList .php 


[** 

* Get Header from configuration value 
* @return string 

*/ 

public function getHeader () 


{ 


return $this-> scopeConfig->getValue('sample/demo/header', 
ScopeInterface: :SCOPE STORE) ; 


} 


The _scopeConfig Class is injected through dependency injection (DI) into the Block class 
in the constructor and allows us to read data stored in the configuration. 


Next, we want to display the data in our template by adding the following line at the top 
of the file: 


view/frontend/templates/list.phtml 


<p><?php echo $this->getHeader () ;?></p> 


Creating a backend data grid 


Adding a page to the backend requires, just like the frontend, a configured route, controller, 
and layout file. In order to display a grid page to show data from a table, there are currently 
three ways available: 


>» Creating a grid container and specifying the fields to display and data source to use 
in the grid class. This method is similar to how a grid is built in Magento 1 and is not 
really flexible/easy to extend. An example of how this is used can be found in the CMS 
Page module: 
Magento\Cms\Block\Adminhtm1\ Page 


Magento\Cms\Block\Adminhtml1\Page\Grid 
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> 


Using this method, there is only a grid container Block class created. The grid fields 
and options are defined in the layout XML file. This makes it possible to extend the 
grid easily by adding extra fields to the XML. An example of this can be found in the 
Customer Group code in the following: 


Magento\Customer\view\adminhtml\layout\customer_group_index.xml 


The last option is fully configured through XML and gives the option to specify the 
data source, quick search, available advanced filters, mass actions, row actions, and 
columns to show. It also gives you the option to customize the columns shown in the 
backend by the user. 


In this example, we will use the last option to build a grid. As this option uses quite a large set 
of files and long XML listings, the complete code can be found on GitHub (https ://github. 
com/Genmato/M2_Sample). 


How to do it... 


The following steps will describe how to add a backend data grid: 


1. 


Configure routes for use in the adminhtm1 area: 


etc/adminhtml/routes.xml 


<?xml version="1.0"?> 
<config xmlns:xsi="http://www.w3.org/2001/ 
XMLSchema-instance" xsi:noNamespaceSchemaLocation= 
"urn:magento:framework:App/etc/routes.xsd"> 
<router id="admin"> 
<route id="sample" frontName="sample"> 


<module name="Genmato Sample" 
before="Magento Backend" /> 


</route> 
</router> 
</config> 


Create the Controller for the backend: 


Controller/Adminhtm1/Demolist/Index.php 


<?php 
namespace Genmato\Sample\Controller\Adminhtml1\Demolist; 


use Magento\Backend\App\Action\Context ; 
use Magento\Framework\View\Result\PageFactory; 
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use Magento\Backend\App\Action as BackendAction; 


class Index extends BackendAction 
[** 
* @var PageFactory 
*/ 
protected $resultPageFactory; 


[** 
* @param Context $context 
* @param PageFactory $resultPageFactory 
+y 
public function __ construct ( 
Context $context, 
PageFactory $resultPageFactory 
) { 
parent:: construct ($context) ; 
Sthis->resultPageFactory = $resultPageFactory; 


[** 

* Check the permission to run it 

* 

* @return bool 

*/ 

protected function _isAllowed() 

return $this-> authorization->isAllowed ( 

'Genmato_Sample::demolist') ; 


[** 

* Index action 

* 

* @return \Magento\Backend\Model\View\Result\Page 

*/ 

public function execute () 

{ 
/** @var \Magento\Backend\Model\View\Result\Page 

SresultPage */ 

SresultPage = $this->resultPageFactory->create(); 
SresultPage->setActiveMenu('Genmato_Sample::demolist') ; 
SresultPage->addBreadcrumb(___('CMS'), __('CMS')); 








SresultPage->addBreadcrumb(__('Demo List'), __('Demo 
List! ) ) ; 

$resultPage->getConfig()->getTitle()->prepend(__ ('Demo 
List' ) ) ; 





return $resultPage; 


} 
Control the access to the page through the ACL: 


etc/acl.xml 


<?xml version="1.0"?> 


<config xmlns:xsi="http://www.w3.org/2001/ 
XMLSchema-instance" xsi:noNamespaceSchemaLocation= 
"urn:magento:framework:Acl/etc/acl.xsd"> 


<acl> 
<resources> 
<resource id="Magento_ Backend: :admin"> 
<resource id="Magento_Backend: :content"> 
<resource id="Magento_ Backend: :content_elements"> 


<resource id="Genmato_ Sample::demolist" 
title="Demo List" sortOrder="10" /> 


</resource> 
</resource> 
</resource> 
</resources> 
</acl> 
</config> 


The following is the Layout file to specify the grid uiComponent used: 


view/adminhtml/layout/sample_ demolist_index.xml 


<?xml version="1.0"?> 
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento: framework: 
View/Layout/etc/page_configuration.xsd"> 
<update handle="styles"/> 
<body> 
<referenceContainer name="content"> 
<uiComponent name="sample demolist listing"/> 
</referenceContainer> 
</body> 
</page> 
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5. Create the uiComponent configuration: 


The referenced uiComponent configuration is quite large. In the sample code (on 
GitHub), this file can be found at the following: 


https://github.com/mage2cookbook/M2_Sample/blob/master/view/ 
adminhtml/ui_component/sample demolist_listing.xml 


6. Add resources used in uiComponent to the dependency injection configuration: 


etc/di.xml 


<?xml version="1.0"?> 
<config xmlns:xsi="http://www.w3.org/2001/ 
XMLSchema-instance" xsi:noNamespaceSchemaLocation= 
"urn:magento:framework:ObjectManager/etc/config.xsd"> 
<preference for="Genmato\Sample\Model\DemoInterface" 
type="Genmato\Sample\Model\Demo" /> 


<type name="Magento\Framework\View\Element \UiComponent \ 
DataProvider\CollectionFactory"> 
<arguments> 
<argument name="collections" xsi:type="array"> 


<item name="sample demolist_ listing _data_source" 
xsi:type="string">Genmato\Sample\Model\ 
ResourceModel \Demo\Grid\Collection</items 


</argument> 





</arguments> 
</type> 
<type name="Genmato\Sample\Model \ResourceModel \Demo\ 
Grid\Collection"> 
<arguments> 
<argument name="mainTable" xsi:type="string"> 
genmato_demo</argument > 
<argument name="eventPrefix" xsi:type="string"> 
sample demolist_grid_collection</argument> 
<argument name="eventObject" xsi:type="string"> 
sample demolist_collection</argument> 





<argument name="resourceModel" xsi:type="sString"> 
Genmato\Sample\Model\ResourceModel \Demo</argument > 
</arguments> 
</type> 
<virtualType name="DemoGridFilterPool" type="Magento\ 
Framework\View\Element \UiComponent \DataProvider\ 
FilterPool"> 
<arguments> 
<argument name="appliers" xsi:type="array"> 
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<item name="regular" xsi:type="object"> 
Magento\Framework\View\Element \UiComponent \ 
DataProvider\RegularFilter</item> 
<item name="fulltext" xsi:type="object"> 
Magento\Framework\View\Element \UiComponent \ 
DataProvider\FulltextFilter</items> 
</argument> 
</arguments> 
</virtualType> 
<virtualType name="DemoGridDataProvider" type="Magento\ 
Framework \View\Element \UiComponent \DataProvider\ 
DataProvider"> 
<arguments> 
<argument name="collection" xsi:type="object" 
shared="false">Genmato\Sample\Model\ResourceModel \ 
Demo\Collection</argument > 





<argument name="filterPool" xsi:type="object" 
shared="false">DemoGridFilterPool</argument> 


</arguments> 
</virtualType> 
</config> 


Add the mass action controller: 
Controller/Adminhtml1/Demolist/MassDelete.php 


<?php 
namespace Genmato\Sample\Controller\Adminhtml1\Demolist; 


use Magento\Framework\Controller\ResultFactory; 

use Magento\Backend\App\Action\Context; 

use Magento\Ui\Component \MassAction\Filter; 

use Genmato\Sample\Model\ResourceModel\Demo\CollectionFactory; 
use Magento\Backend\App\Action; 


class MassDelete extends Action 


{ 


[** 
* @var CollectionFactory 
i? 


protected $collectionFactory; 


[** 
* @param Context S$context 
* @param Filter $filter 
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} 





* @param CollectionFactory $collectionFactory 

ia? 

public function _ construct (Context $context, Filter 
Sfilter, CollectionFactory $collectionFactory) 


Sthis->filter = filter; 
Sthis->collectionFactory = $collectionFactory; 
parent:: construct ($context) ; 


} 


[** 

* Execute action 

* 

* @return \Magento\Backend\Model\View\Result\Redirect 

37 

public function execute () 
$collection = $this->filter->getCollection( 

$this->collectionFactory->create()); 

ScollectionSize = $collection->getSize(); 


foreach (S$collection as $item) { 
Sitem->delete() ; 


' 


Sthis->messageManager->addSuccess(__('A total of %1 
record(s) have been deleted.', $collectionSize)) 


/** @var \Magento\Backend\Model\View\Result\Redirect 
SresultRedirect */ 


SresultRedirect = $this->resultFactory->create ( 
ResultFactory::TYPE REDIRECT) ; 


return $resultRedirect->setPath('*/*/'); 





8. Add options to the menu: 


etc/adminhtml/menu.xml 


<?xml version="1.0"?> 
<config xmlns:xsi="http://www.w3.org/2001/ 


XMLSchema-instance" xsi:noNamespaceSchemaLocation= 
"urn:magento:module:Magento Backend:etc/menu.xsd"> 


<menu> 
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<add id="Genmato_Sample::demolist" title="Demo List" 
module="Genmato_Sample" sortOrder="10" 
parent="Magento Backend::content elements" 
action="sample/demolist" 
resource="Genmato Sample: :demolist"/> 
</menu> 
</config> 


The controller and layout file are the same for the frontend, only the backend is protected 
through an ACL. This allows administrators to create specific user rules and allow access only 
to the selected pages. 


The resource access is checked in the controller in the following function: 


protected function _isAllowed() 


The uiComponent configuration 


As the complete configuration through uiComponent results in a large XML file, we will explain 
some parts on how they are configured and hook in to the system. 


Data source 
The data source is specified through the XML node: 


<listing> 

<dataSource name="sample_demolist_listing data_source"> 

<argument name="dataProvider" xsi:type="configurableObject"> 

<argument name="class" xsi:type="string"> 
DemoGridDataProvider</argument> 


The specified data class, DemoGridDataProvider, is configured through dependency 
injection and specified in the etc/di.xml file. Here, DemoGridDataProvider corresponds 
to the Genmato\Sample\Model\ResourceModel\Demo\Collection collection. 
Additionally, DemoGridFilterPool and the collection are configured through this file to load 
the data. 


Mass actions for grid 


It is also easy to specify multiple mass actions to be used in the grid; you can specify the title, 
action to execute, and optional message alert box: 


<massaction name="listing_massaction"> 
<argument name="data" xsi:type="array"> 
<item name="config" xsi:type="array"> 
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<item name="selectProvider" xsi:type="string"> 
sample _demolist_listing.sample demolist_listing. 
sample demolist_columns.ids</item> 

<item name="indexField" xsi:type="string">demo_id</item> 





</item> 
</argument > 
<action name="delete"> 
<argument name="data" xsi:type="array"> 
<item name="config" xsi:type="array"> 
<item name="type" xsi:type="string">delete</item> 
<item name="label" xsi:type="string" translate 
="true">Delete</item> 
<item name="url" xsi:type="url" path= 
"sample/demolist/massDelete"/> 
<item name="confirm" xsi:type="array"> 
<item name="title" xsi:type="string" 
translate="true">Delete items</item> 
<item name="message" xsi:type="string" translate="true"> 
Are you sure you want to delete selected items? 
</item> 
</item> 
</item> 
</argument> 
</action> 
</massaction> 


In this example, we add an option to delete records from the database. In order to delete the 
records from the database, you need to create a controller that handles the removal of the 
records. You need to create a Cont roller class for every action you specify, this controller 
contains your custom code to be executed. 


By adding the menu option in the Content menu below the Pages menu item, the page can 
be accessed through the backend. This link action will go to the specified sample/demolist 
URL that will result in the full URL: 


http: //example.com/admin/sample/demolist/ 
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The resource argument defines the ACL that is used to show/hide the menu option 
depending on the user rights: 


Content 


Pages 
Demo List 
Blocks 


Widgets 


CONTENT 





When clicking on the menu option, the resulting page will look as follows: 





Demo List Q wh eenmato 
Add New Item 
demo Q Y Filters © default View » | {$ Columns ~ 
Active filters: Keyword: demo Clear all 
Select Items X 1 records found 20 v | per page 1 of1 
Ea oD 4 Title Action 
CONTENT 1 Demo Title Select v 
il, 
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For more information about uiComponents that are available, you can refer to the following: 





http: //devdocs.magento.com/guides/v2.0/ui-components/ui-component. 
html 





Creating a backend form to add/edit data 


If you want to add a new record or edit an existing record, it is possible to create a form to 
have a user friendly way to process the data. In this example, we will see how to create a form 
to edit an existing record. The path used to add a record will be as follows: 


http://example.com/admin/sample/demolist/new/ 


This will require the controller name to be new, but as this is a reserved word in PHP, the class 
name used will be newAction. The execute function is not only used to add a new record, but 
it can also be used to edit an existing record. In the following code, only the execute action is 
shown; see the sample code for the complete source. 


Getting ready 


In this recipe, we will add the option to add or edit records; for this, the route used in the 
previous chapter is used, only new controllers and blocks are shown. 


How to do it... 


Follow these steps to add a form to your module: 


1. Add the controller: 
Controller/Adminhtml1/Demolist/NewAction.php 


<?php 

namespace Genmato\Sample\Controller\Adminhtml1\Demolist; 
use Magento\Backend\App\Action; 

class NewAction extends Action 


{ 


public function execute () 


{ 


SdemoId = Sthis-sgetRequest ()->sgetParam('demo_id') ; 








} 


Sthis->_coreRegistry->register('current_demo_id', 
$demolId) ; 


/** @var \Magento\Backend\Model\View\Result\Page 
SresultPage */ 
SresultPage = $this->resultPageFactory->create(); 


if ($demoId === null) { 
SresultPage->addBreadcrumb(__('New DemoList'), 
__('New DemoList')) ; 
SresultPage->getConfig()-sgetTitle()-s>prepend(___('New 
DemoList')); 
} else { 
SresultPage->addBreadcrumb(__('Edit DemoList'), 


('Edit DemoList') ); 


Sresult Page->getConfig()->getTitle()-> 
prepend( _('Edit DemoList')); 
} 


// Build the edit form 





Sresult Page->getLayout () ->addBlock ( 
'Genmato\Sample\Block\Adminhtml\Demo\Edit', 
'demolist', 'content') 


->setEditMode ( (bool) $demoId) ; 


return SresultPage; 


Create the Form container: 


Block/Adminhtml/Demo/Edit .php 


<?php 
namespace Genmato\Sample\Block\Adminhtml1\Demo; 


use Magento\Backend\Block\Widget\Form\Container; 


class Edit extends Container 


{ 


/* 


* 


* 


*/ 


* 


Remove Delete button if record can't be deleted. 


@return void 


protected function _construct () 


{ 


$this->_objectId = 'demo_id'; 
$this->_controller = 'adminhtml_demo'; 
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Sthis-> blockGroup = 'Genmato_Sample'; 

parent:: construct (); 

SdemoId = $this->getDemolId() ; 

if (!$demoId) { 
Sthis->buttonList->remove('delete'); 


[** 
* Retrieve the header text, either editing an existing 
record or creating a new one. 





k 
* @return \Magento\Framework\Phrase 
*/ 
public function getHeaderText () 
{ 
S$demoId = S$this->getDemolId() ; 
if (!$demoId) { 


return __('New DemoList Item'); 
} else { 
return _ ('Edit DemoList Item'); 


public function getDemoId() 


{ 
if (!$this->demoId) { 
Sthis->demoId=$this->coreRegistry-> 
registry('current_demo_id'); 


} 


return Sthis->demolId; 


} 


3. Build the form by defining the fields and types that are used: 
Block/Adminhtm1/Demo/Edit/Form. php 


<?php 

namespace Genmato\Sample\Block\Adminhtml1\Demo\Edit; 
use Magento\Customer\Controller\RegistryConstants; 
use Magento\Backend\Block\Widget\Form\Generic; 
class Form extends Generic 

[** 
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* Prepare form for render 
* 


* @return void 
*/ 
protected function _prepareLayout () 


{ 


parent:: prepareLayout () ; 


/** @var \Magento\Framework\Data\Form $form */ 
$form = $this-> formFactory->create() ; 


SdemoId = Sthis->_coreRegistry->registry ( 
‘current _demo_id') ; 
/** @var \Genmato\Sample\Model\DemoFactory $demoData */ 





if ($demoId === null) { 
SdemoData = $this->demoDataFactory->create(); 
} else { 
SdemoData = $this->demoDataFactory->create() ->load ( 
$demoId) ; 


SyesNo = []; 
SyesNo[0] = 'No'; 
SyesNo [1] 


LYes:" 3 


Sfieldset = $form->saddFieldset ('base fieldset', 
['legend' => __('Basic Information')])j; 


$fieldset->addField ( 


vertie, 

Teext.', 

[ 
'name' => 'title', 
"labert a> . ("Title"), 
‘title’ =>  ('Title'), 
‘required! => true 


] 
hi 


$fieldset->addField ( 
‘is active', 
"select', 
[ 


'name' => 'is_active', 
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‘label' => ('Active'), 
VWeitle" =>. (Active); 
'class' => 'required-entry', 
'required' => true, 

'values' => SyesNo, 


] 
its 


$fieldset ->addField ( 
‘is visible', 


"select', 
[ 
'name' => 'is_visible', 
"label! =s ('Visible'), 
'title' => _ ('Visible'), 
'class' => 'required-entry', 
'required' => true, 
'values' => SyesNo, 
] 
E 
if ($demoData->getId() !== null) { 
// If edit add id 
Sform->addField('demo_id', 'hidden', ['name!' => 
'demo_id', 'value' => $demoData->getId()]); 


} 


if ($this-> backendSession->getDemoData () ) { 
Sform->addValues (Sthis-> backendSession-> 
getDemoData()); 
Sthis->_backendSession->setDemoData (null); 
} else { 
$form->addValues ( 
[ 
'id' => $demoData->getId(), 
'title' => S$demoData->getTitle(), 
‘is active' => SdemoData->getIsActive(), 
‘is visible' => $demoData-sgetIsVisible(), 
] 
); 
} 


S$form->setUseContainer (true); 
Sform->setId('edit form') ; 
$form->setAction (Sthis->getUrl ('*/*/save')); 
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Sform->setMethod('post') ; 
Sthis->setForm(Sform) ; 


} 


Add the Save action controller, which is called when pressing the Submit button: 


Controller/Adminhtm1/Demolist/Save.php 


<?php 
namespace Genmato\Sample\Controller\Adminhtml1\Demolist; 
use Magento\Backend\App\Action; 
class Save extends Action 
[** 
* Save DemoList item. 
* 
* @return \Magento\Backend\Model\View\Result\Page|\ 
Magento\Backend\Model\View\Result\Redirect 
*/ 
public function execute () 
Sid = S$this->getRequest () ->getParam('demo_id'); 
SresultRedirect = $this->resultRedirectFactory-> 


create(); 
try { 
if ($id !== null) { 
$demoData = $this->demoFactory->create()-> 
load ((int)$id); 
} else { 
$demoData = $this->demoFactory->create(); 


} 


$data = $this->getRequest () ->getParams() ; 
S$demoData->setData ($data) ->save(); 





Sthis->messageManager->addSuccess(__('Saved DemoList 
item.')); 
SresultRedirect->setPath('sample/demolist') ; 
} catch (\Exception $e) { 
Sthis->messageManager->addError (S$e->getMessage()) ; 
Sthis->_getSession() ->setDemoData ($data) ; 


SresultRedirect->setPath('sample/demolist/edit', 
['demo_id' => $id]); 
} 


return S$resultRedirect; 


} 
} 
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In the controller, the demo_id parameter is stored in the Magento registry; this makes the 
data available to retrieve in the same request in other blocks/models to do further processing 
with it. Additionally, the Genmato\Sample\Block\Adminhtm1\Demo\Edit class is loaded. 
This class will generate the container for the form and load the Genmato\Sample\Block\ 
Adminhtm1\Demo\Edit\Form class that will generate the form to be shown. 


Building the form 
Every form is built from the following: 


$form = $this-> formFactory->create() ; 


As it is not possible to add fields to a form directly, you need to create a fieldset first. It is 
possible to add multiple fieldsets to a single form and assign multiple form fields to a fieldset. 
To create a fieldset, use the following command: 


Sfieldset = $form->saddFieldset('[name]', ['legend' => __([heading])]); 


Adding a form field 
Adding a form field to the fieldset is done as follows: 


Sfieldset->addField([elementId], [type], [config], [after]); 
This method has the following parameters: 


>» elementId: This is the unique name of the form field element. 


> type: This defines the type of element that is used as the input field. This can be 
your own class that implements the Magento\Framework\Data\Form\Element\ 
AbstractElement class or one of the following: 


a button 

a checkbox 

a checkboxes 

a column 

a date 

a editablemultiselect 


a editor 
a fieldset 
a file 

a gallery 
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> 


Qa 


m] 


hidden 
image 
imagefile 
label 

link 
multiline 
multiselect 
note 
obscure 
password 
radio 
radios 
reset 
select 
submit 
text 
textarea 


time 


These input types are rendered from the classes found under the Magento\ 
Framework\Data\Form\Element\ directory. 


config: This is an array of extra configuration data; some of the options are as 


follows: 


n 


Q 


Qa 


name: This is the name of the element from the data model that holds the 
data 


label: This is the text that is used as a label 
title: This is the text that is used as the field title parameter 


class: This is the optional class for the input field, which can be used for 
form validation 


required: This is optional. This is set if a field is required to have data. 
value: This is the value used for select/multiselect 


after: This is the optional parameter to specify where the form field needs to be 
placed; use element Id of the form field that you want to place this field after. 
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Loading the data 


In order to display the data currently stored for the record that we want to edit, the stored 
demo_idis retrieved from the registry: 


SdemoId = Sthis-> coreRegistry->registry('current_demo_id') ; 


Next, we check whether there is a valid value stored as demoId and load the data from the 
database (or just set an empty object): 


/** @var \Genmato\Sample\Model\DemoFactory $demoData */ 


if ($demoId === null) { 
SdemoData = $this->demoDataFactory->create() ; 
} else { 


SdemoData = $this->demoDataFactory->create()->load($demoId) ; 


} 
Now that the data is loaded, it is possible to set this data to the form fields: 


$form->addValues ( 
[ 
'id' => SdemoData->getId(), 
'title' => $demoData->getTitle(), 
‘is active' => SdemoData->getIsActive(), 
‘is visible' => $demoData-sgetIsVisible(), 
] 
E 


Saving the data 
When submitting the form to save the data, the action and method should be set to the URL 
that handles the save action: 


$form->setAction ($this->getUrl('*/*/save!')); 
$form->setMethod ('post'!); 


The URL */*/save maps to the Controller/Adminhtml/Demolist/Save controller and 
will handle the save action. 
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In the controller, we first load the current record to load all the current values: 


if ($id !== null) { 

SdemoData = $this->demoFactory->create()->load( (int) $id) ; 
} else { 

SdemoData = $this->demoFactory->create() ; 


} 
Next, we retrieve the submitted data, store it in the loaded object, and save the object: 


$data = $this->getRequest () ->getParams() ; 
$demoData->setData ($data) ->save(); 








Creating Magento 2 


Extensions - Advanced 


In this chapter, we will cover some of the more advanced features when building Magento 2 
extensions in the following recipes: 


> 


> 


> 


> 


> 


> 


Using dependency injection to pass classes to your own class 
Modifying functions with the use of plugins - Interception 
Creating your own XML module configuration file 

Creating your own product type 

Working with service layers/contracts 

Creating a Magento CLI command option 


Introduction 


In the previous chapter, we explained the basics on how to create a Magento 2 extension/ 
module, including how to store data in a database and create a frontend page and backend 
grid with a form to add/edit data. In this chapter, we will explain some more advanced 
functions that can be used while developing custom extensions. The first two recipes are 
informational and describe the basic usage of dependency injection and plugins. The other 
recipes are examples on how to add your custom XML configuration file and commands to the 
Magento CLI tool. 
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Using dependency injection to pass classes 





to your own class 


In Magento 2, they introduced the usage of dependency injection, which is a well-known 
design pattern that changes the way you use resources in the code. Using dependency 
injection, all the required resources are created when the class is instantiated instead of 
creating an object (through the Magento 1.x Mage class) when necessary. The benefit of 
this is that it is easier to use unit testing as it is possible to mock the required objects. 


Getting ready 


In this example, we will see how to create a new record in the demolist model created in 
the previous chapter. The record is created using an observer on the sales order place 





after event that is dispatched after a new order is saved. 


How to do it... 


Follow these steps on how to use dependency injection: 


1. First, we declare the Observer to listen to the event that we want: 


etc/events.xml: 


<config xmlns:xsi="http://www.w3.org/2001/ 
XMLSchema-instance" xsi:noNamespaceSchemaLocation= 
"urn:magento:framework:Event/etc/events.xsd"> 


<event name="sales order place after"> 


<observer name="sample" instance= 
"Genmato\Sample\Observer\PlaceOrder"/> 


</event> 
</config> 
2. Next, we create the Observer class as defined in step 1: 
Observer/PlaceOrder.php: 


<?php 
namespace Genmato\Sample\Observer; 


use Magento\Framework\Event \ObserverInterface; 
use Magento\Framework\Event\Observer as EventObserver; 
use Genmato\Sample\Model\DemoFactory; 


class PlaceOrder implements ObserverInterface 


{ 
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[** 
* @var DemoFactory 
+ 


protected $demoFactory; 


[** 

* @param DemoFactory $demoFactory 

*/. 

public function _construct(DemoFactory $demoFactory) 


{ 


$this->demoFactory = $demoFactory; 


[** 
* Add record to demoList when new order is placed 
* 


* @param EventObserver Sobserver 

* @return void 

*/ 

public function execute (EventObserver $observer) 


{ 


/** @var \Magento\Sales\Model\Order Sorder */ 
Sorder = Sobserver->getEvent () ->getOrder () ; 


$demoList = $this->demoFactory->create() ; 


SdemoList->setTitle ( ('New order (%1) placed!', 


Sorder->getIncrementId())); 


try { 
SdemoList->save(); 

} catch (\Exception $ex) { 
// Process error here.... 


} 


3. Refresh the cache: 


bin/magento cache:clean 
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In the Observer Class defined in step 2, the object that we need to create a new record in is 
injected into the constructor function: 


public function construct (DemoFactory $demoFactory) 


During the instantiation of the class, the necessary classes are injected by the Magento 2 
dependency injection (DI) framework. In this case, it adds the Genmato\Sample\Model \ 
DemoFactory Class to the constructor. This class is not a real existing class; this is because 
the class that we want to use is a non-injectable class. A non-injectable class is a class that you 
create yourself through the new [classname] command or the Mage: :getModel () call in 
Magento 1.x. With the use of dependency injection, creating a new object should be handled by 
the object manager, but in order to be able to use unit testing, it is not advisable to create the 
object directly in the code. To solve this, the Magento framework uses autogenerated classes. In 
this example, the generated class is stored in var/generation/Genmato/Sample/Model/ 
DemoFactory. php: 


<?php 
namespace Genmato\Sample\Model ; 


[** 

* Factory class for @see \Genmato\Sample\Model\Demo 
*/ 

class DemoFactory 


[** 
* Object Manager instance 
* 


* @var \Magento\Framework\ObjectManagerInterface 
*/ 


protected $ objectManager = null; 


[** 
* Instance name to create 
* 


* @var string 
st A 


protected $ instanceName = null; 


[** 
* Factory constructor 


* 


* @param \Magento\Framework\ObjectManagerInterface 
SobjectManager 
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* @param string SinstanceName 

+j 

public function __ construct (\Magento\Framework\ 
ObjectManagerInterface $objectManager, $instanceName = 
'\\Genmato\\Sample\\Model\\Demo' ) 
Sthis-> objectManager = SobjectManager; 
Sthis->_ instanceName = SinstanceName; 


} 


[** 
* Create class instance with specified parameters 
* 
* @param array $data 
* @return \Genmato\Sample\Model\Demo 
*/ 
public function create(array $data = array()) 
return Sthis-> objectManager->create (S$this->_instanceName, 
data); 


} 
} 


In this case, the autogenerated class is a Factory class that has only the create () 
function available. In the create function, the object manager is used to instantiate the 
Genmato\Sample\Model\Demo class; this object can then be used to load an existing 
record or create a new record and save the data stored in the object. 


Modifying functions with the use of plugins - 


Interception 





One of the biggest problems in Magento 1.x was that changing the behavior of a function in 
a class that didn't have an event trigger had to be rewritten. This works fine if only a single 
rewrite for a class was used, but when using a large number of extensions, there is a risk 
that multiple extensions rewrite the same class, which can result in unpredictable results. 


In Magento 2, this problem is partly solved by introducing Interception in the form of plugins. 
With the use of plugins, it is possible to modify a function in three places: 


> Before execution: With the before plugin, it is possible to (pre)process any data given 
to the original function by modifying the original function arguments; this allows you 
to replace the original method or change the input variables and supply them to the 
original method. 


[274] 
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> Around execution: In the around plugin, you can modify both the input and output 
values of the original function. In your own function, you decide what action to do 
before the original function call and what will be done after it. 


>» After execution: The after plugin takes the result generated from the original 
function, modifies the result, and the modified result is then returned to the caller of 
the original function. 


Getting ready 


The use of plugins is controlled through di .xm1. It is possible to use the global from etc/ or 
the area specific from etc/ [area]; in this case, we will use the global, which means that it is 
used in all areas. 


How to do it... 


Create the following files in this recipe to try the use of plugins: 


1. To enable the plugins, add the following lines to di .xm1: 


etc/di.xml 


<type name="Magento\Cms\Model\Page"> 
<plugin name="sample before" type= 
"Genmato\Sample\Plugin\BeforePage" sortOrder="1"/> 


</type> 


<type name="Magento\Catalog\Model\Product"> 
<plugin name="sSample around" type= 
"Genmato\Sample\Plugin\AroundProduct" sortOrder="1"/> 


</type> 


<type name="Magento\Cms\Model\Page"> 
<plugin name="sample after" type= 
"Genmato\Sample\Plugin\AfterPage" sortOrder="1"/> 


</type> 


2. The following is the before plugin class: 


Plugin/BeforePage.php 


<?php 
namespace Genmato\Sample\Plugin; 


use Magento\Cms\Model\Page; 


class BeforePage 
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public function beforeSetContent (Page $subject, $content) 


{ 


return S$subject->setContent ('<!--'.Scontent.!-->!'); 


} 


The following is the around plugin class: 


Plugin/AroundProduct . php 
<?php 
namespace Genmato\Sample\Plugin; 


use Magento\Catalog\Model\Product ; 


class AroundProduct 


{ 


public function aroundSave (Product $subject, \Closure 
Sproceed) 


{ 


Ssubject->setMyCustomAttribute('sample') ; 
$return = S$proceed() ; 
Ssubject->setMyCustomAttribute(''); 


return $return; 


} 


The following is the after plugin class: 


Plugin/AfterPage.php 


<?php 
namespace Genmato\Sample\Plugin; 


use Magento\Cms\Model\Page; 


class AfterPage 


{ 


public function afterGetTitle(Page $subject, $result) 


{ 
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return 'SAMPLE: '.Sresult; 


} 


5. To refresh the cache, execute the following command: 


bin/magento cache:clean 


All configured interceptors/plugins are evaluated during initialization. When a call is made to 
a function that is extended through a plugin, all plugin functions are executed based on the 
configured sortOrder as configured in di . xml. If there are multiple plugins that extend the 
same original function, they are executed in the following sequence: 

1. The before plugin with the lowest sortOrder 
The around plugin with the lowest sortOrder 
Other before plugins (from the lowest to highest sortOrder) 
Other around plugins (from the lowest to highest sortOrder) 
The after plugin with the highest sortOrder 


oa PWN 


Other after plugins (from the highest to lowest sortOrder) 


There are some limitations on where you can use plugins; it is not possible to use plugins for 
the following: 

» Final methods/classes 

>» Non-public methods 

» Class methods (such as static methods) 

>» Inherited methods 

>» — construct 

>» Virtual types 


If you need to modify one of these types listed, the only option to do this is to rewrite 
(preference) your class through di.xml. 





Chapter 8 





Creating your own XML module configuration 


file 


In Magento 1.x, it was possible to use the .xm1 file to include custom configuration options 
that might be necessary for an extension. This is no longer possible with Magento 2 because 
the XML files are all validated against a schema and anything other than predefined options 
are not allowed. To solve this, it is possible to generate your own custom XML file to set up the 
parameters that you need. This also allows other extensions to define settings as the output is 
generated from all modules that have this file configured. 


Getting ready 


In order to use your own XML configuration file, it is important that you generate a valid 
schema (XSD) file that will be used to validate the XML files when they are merged. 


How to do it... 


The following steps show you how to define a custom XML configuration file for your module: 





1. First, we create the Reader for the XML file and define the name of the file that 
should be read from all modules: 


Model/Sample/Reader.php 


<?php 
namespace Genmato\Sample\Model\Sample; 


use Magento\Framework\Config\Reader\Filesystem; 

use Magento\Framework\Config\FileResolveriInterface; 
use Magento\Framework\Config\ConverterInterface; 

use Genmato\Sample\Model\Sample\SchemaLocator; 

use Magento\Framework\Config\ValidationStateInterface; 


class Reader extends Filesystem 
{ 
protected $ idAttributes = [ 
'/table/row' => 'id', 
'/table/row/column' => 'id', 


l; 


[** 
* @param FileResolverInterface $fileResolver 
* @param ConverteriInterface $converter 
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* @param SchemaLocator $schemaLocator 

* @param ValidationStateInterface $validationState 

* @param string $fileName 

* @param array $idAttributes 

* @param string $domDocumentClass 

* @param string $defaultScope 

*/ 

public function __ construct ( 
FileResolverInterface $fileResolver, 
ConverterInterface S$converter, 
SchemaLocator $schemaLocator, 
ValidationStateInterface $validationState, 


SfileName = 'sample.xml', 
SidAttributes = [], 
SdomDocumentClass = 'Magento\Framework\Config\Dom', 


$defaultScope = 'global' 
| 

parent:: construct ( 
S$fileResolver, 
Sconverter, 
SschemaLocator, 
S$SvalidationState, 
SfileName, 
S$idAttributes, 
S$domDocumentClass, 
SdefaultScope 


} 


2. To validate the schema, the Reader must know where to find the schema file: 
Model/Sample/SchemaLocator.php 


<?php 
namespace Genmato\Sample\Model\Sample; 


use Magento\Framework\Config\SchemaLocatoriInterface; 
use Magento\Framework\Config\Dom\UrnResolver; 


class SchemaLocator implements SchemaLocatoriInterface 


{ 


/** @var UrnResolver */ 








protected SurnResolver; 


public function __ construct (UrnResolver SurnResolver) 


{ 


Sthis->urnResolver = SurnResolver; 


[** 
* Get path 
* 


* @return s 
*/ 
public func 


{ 


return $t 


'urn:genmato:module:Genmato Sample:/etc/sample.xsd') ; 


[** 
* Get path 
* 


* @return s 
*/ 
public func 


{ 


return $t 


'urn:genmato:module:Genmato_Sample:/etc/sample.xsd') ; 


<?php 
namespace Gen 


use Magento\F 
use Genmato\S 
use Magento\F 
use Magento\F 


class Data ex 


[** 


to merged config schema 


tring 


tion getSchema () 





his->urnResolver->getRealPath ( 


to pre file validation schema 


tring 


tion getPerFileSchema () 





his->urnResolver->getRealPath ( 


Asingle class is used to get the merged data and cache the XML: 
Model/Sample/Data.php 


mato\Sample\Model\Sample; 


ramework\Config\Data\Scoped; 
ample\Model\Sample\Reader; 
ramework\Config\ScopeInterface; 
ramework\Config\CacheInterface; 


tends Scoped 
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* Scope priority loading scheme 

* 

* @var array 

*:/ 

protected $ scopePriorityScheme = ['global']; 


[** 
* @param Reader $reader 
* @param ScopeInterface $configScope 
* @param CacheInterface $cache 
* @param string $cachelId 
*/ 
public function __ construct ( 
Reader $reader, 
ScopeInterface $configScope, 
CacheInterface $cache, 


$cacheId = 'sample_config_cache' 
a 
parent::__construct ($reader, $configScope, $cache, 
$cacheId); 


} 
4. Add the XSD schema file: 


etc/sample.xsd 


<?xml version="1.0" encoding="UTF-8"?> 
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" > 
<xs:element name="table"> 
<xs:complexType> 
<xS: Sequence> 
<xs:element name="row" maxOccurs="unbounded" 
minOccurs="0"> 
<xs:complexType> 
<xS: Sequence> 
<xs:element name="column" 
maxOccurs="unbounded" minOccurs="0"> 
<xs:complexType> 
<xS: Sequence> 
<xs:element type="xs:string" 
name="label"> 


<xS:annotation> 








<xs:documentation>from first xml 


from s 


econd xmlthey apear in 


both xmls with the same path 
and id and second one overrides 
the value for `attr1i`^ from 


first 


xml from first 


xml</xs:documentation> 


</xs:annot 
</xs:element 
</xs:sequence> 
<xsS:attribute 
name="id" us 
<xs:attribute 
name="sort" 
<xs:attribute 
name="attri1" 





<xs:attribute 
name="disabl 
</xs:complexType 
</xs:element> 
</xs:sequence> 
<xS:attribute type=" 
use="optional"/> 
</xs:complexType> 
</xs:element> 
</xs:sequence> 
</xs:complexType> 
</xs:element> 
</xs:schema> 


Add the configuration file for your module 
etc/sample.xml 


<?xml version="1.0"?> 


<table xmlns:xsi="http://www.w3. 
XMLSchema-instance" xsi:noName 


ation> 


> 


type="xs:string" 
e="optional"/> 
type="xs:byte" 
use="optional"/> 
type="xs:string" 
use="optional"/> 





type="xs:string" 
ed" use="optional"/> 


> 


xs:string" name="id" 


org/2001/ 
spaceSchemaLocation= 


"urn:genmato:module:Genmato_Sample:/etc/sample.xsd"> 


<row id="rowl"> 
<column id="coll1" sort="10" 
<label>Col 1</label> 
</column> 
</row> 
<row id="row2"> 
<column id="coll1" sort="10" 
<labels>Col 1</label> 
</column> 


attrl="valli"> 


attrl="valli"> 
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<column id="col2" sort="20" disabled="true" 
attrl="val2" > 


<label>Col 2</labels 
</column> 
<column id="col3" sort="15" attrl="vall"> 
<label>Col 3</labels 
</column> 
</row> 
</table> 


6. Get and display the merged data: (This is optional; in this example, we display the 
data through a frontend route.) 


Controller/Index/Sample.php 


<?php 
namespace Genmato\Sample\Controller\Index; 


use Magento\Framework\App\Action\Action; 

use Magento\Framework\App\Action\Context ; 

use Magento\Framework\View\Result\PageFactory; 
use Genmato\Sample\Model\Sample\DataFactory; 


class Sample extends Action 
[** 
* @var PageFactory 
*/ 


private SresultPageFactory; 


/** @var DataFactory S$dataReader */ 
private S$dataReader; 


[** 
* @param Context $context 
* @param PageFactory $resultPageFactory 
* @param DataFactory $dataReader 
*/ 
public function __ construct ( 
Context $context, 
PageFactory $resultPageFactory, 
DataFactory $dataReader 
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Sthis->dataReader = SdataReader; 


parent:: construct ($context) ; 
[** 
* Renders Sample 
ty 


public function execute () 
{ 
SmyConfig = §$this->dataReader->create(); 
print_r ($myConfig->get()); 
} 
} 


7. Refresh the cache using the following command: 


bin/magento cache:clean 


8. Now you can check the result data using the following command: 


http: //example.com/sample/index/sample/ 


The configuration reader defines the file that is used in the (S$fileName = 'sample.xml1') 
constructor. Make sure that the filename used is unique; otherwise, configuration data from 
another module will be merged and validation will fail as it won't match the schema that you 
defined. A solution could be to use <vendor>_<module>.xm1 as the filename. 


In the constructor, SchemaLocator is also defined; this will define the schema (XSD file) 
that is used to validate the XML. To be able to get the schema file independent from where 
the module is installed (vendor/ or app/code), the schema location is built from the 
defined URN: urn: genmato:module:Genmato_ Sample: /etc/sample.xsd. This URN is 
parsed and translated to the directory where the module is installed, which is done through 
ComponentRegistrar, and the module location is registered in registration.php as 
described in Chapter 7, Creating Magento 2 Extensions - the Basics. 


It is possible to get all data using the read() method on the Reader class, this will result 

in re-reading and merging all XML files, which will impact every request. This can delay the 
website; therefore, the Data class is added. Here, Reader is injected through the constructor. 
To get the data, you can call the get () method of the Data class. This will read and merge 
all XML files if they are not cached and return the cached version when available. If you don't 
supply an argument to the get () method, it will return all data, but it's also possible to 
specify a node that you would like. 
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The Data class can be added everywhere that you need to get your configuration data; for 
this, you add Genmato\Sample\Model\Sample\DataFactory to the constructor. This 
autogenerated class allows you to instantiate your configuration data class: 


$myConfig = $this->dataReader->create(); 
This gets a value from the configuration: 


$myConfig->get ('<node>') ; 


Creating your own product type 


In Magento 2, it is easy to add your own product type, which can be useful when you want to 
add some special features that are not available through the default product types. In this 
recipe, we will see a minimal new product type that calculates the price based on the cost of 
the product; you can easily extend it further to fit your own needs. 


Getting ready 


Every product type has its own unique code specified, and it's important to use a short code to 
identify your product type. 


How to do it... 


The following steps in this recipe show you how to create a (minimal) new product type: 


1. First, we need to declare the new product type: 


etc/product_types.xml 


<?xml version="1.0"?> 
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema- 
instance" xsi:noNamespaceSchemaLocation="urn: 
magento:module:Magento_Catalog:etc/product_types.xsd"> 
<type name="demo" label="Demo Product" 
model Instance="Genmato\Sample\Model\Product\Type\Demo" 
indexPriority="80" sortOrder="80"> 


<priceModel instance= 
"Genmato\Sample\Model\Product\Type\Demo\Price" /> 
<customAttributes> 
<attribute name="refundable" value="true"/> 
<attribute name="taxable" value="true"/> 
</customAttributes> 
</type> 
</config> 
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Now, we create modelInstance as configured in the product type definition; this is 
the minimal product type code definition. You can add your own functions that would 
be necessary to your product here: 


Model /Product/Type/Demo. php 


<?php 
namespace Genmato\Sample\Model\Product\Type; 


use Magento\Catalog\Model\Product\Type\AbstractType; 


class Demo extends AbstractType 


{ 


[** 

* Product-type code 

*/ 

const TYPE CODE = 'demo'; 
[** 


* Delete data specific for Simple product-type 

* 

* @param \Magento\Catalog\Model\Product $product 

* @return void 

*/ 

public function deleteTypeSpecificData ( 
\Magento\Catalog\Model\Product $product) 

{ 


} 
} 


To calculate the price based on the cost attribute, priceModel is specified. This 
class holds the code to get the price of a product. Here, we use a fixed value of 
1.25*cost attribute. It is also possible to get this value from another attribute or 
system configuration field: 


Model /Product/Type/Demo/Price.php 


<?php 
namespace Genmato\Sample\Model\Product\Type\Demo; 


use Magento\Catalog\Model\Product\Type\Price as 
ProductPrice; 


class Price extends ProductPrice 


{ 


[** 
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* Default action to get price of product 
* 

* @param Product $product 

* @return float 

*/ 

public function getPrice($product) 


{ 


return $product->getData('cost')*1.25; 


} 


By default, the cost attribute is only available for all product types; therefore, we need 
to add our product type to the apply_to field of the cost attribute. This will be done 
through an UpgradeData script: 


Setup/UpgradeData.php 


<?php 
namespace Genmato\Sample\Setup; 


use Magento\Eav\Setup\EavSetup; 

use Magento\Eav\Setup\EavSetupFactory; 

use Magento\Framework\Setup\UpgradeDataInterface; 

use Magento\Framework\Setup\ModuleContextInterface; 
use Magento\Framework\Setup\ModuleDataSetupInterface; 
use Magento\Catalog\Model\Product ; 


[** 
* @codeCoverageIgnor 
žy. 
class UpgradeData implements UpgradeDataInterface 
[** 
* EAV setup factory 
* 





* @var EavSetupFactory 
zy 


private SeavSetupFactory; 


[** 
* Init 


* 


* @param EavSetupFactory SeavSetupFactory 


*/ 








public function __ construct (EavSetupFactory 
SeavSetupFactory) 


Sthis->eavSetupFactory = SeavSetupFactory; 


[** 

* {@inheritdoc} 

* @SuppressWarnings (PHPMD.ExcessiveMethodLength) 

*/ 

public function upgrade (ModuleDataSetupInterface $setup, 
ModuleContextInterface $context) 


if (version_compare ($context->getVersion(), '0.8.4', 
re')) { 
/** @var EavSetup SeavSetup */ 
SeavSetup = $this->eavSetupFactory->create(['setup' 
=> $setup]); 


$fieldList = [ 
“price”, 
‘special _price', 
‘special _from_date', 
'special_to date', 
‘minimal _price', 
'cost', 
‘'tler price', 
'weight', 

l; 


// make these attributes applicable to demo product 
foreach ($fieldList as $field) { 
SapplyTo = explode ( 


1 1 
mot 


SeavSetup->getAttribute (Product: :ENTITY, $field, 
‘apply _to') 
); 
if (!in_array('demo', $applyTo)) { 
SapplyTo[] = 'demo'; 
SeavSetup->updateAttribute ( 
Product: : ENTITY, 
$field, 
‘apply_to', 
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implode(',', SapplyTo) 


5. Specify the available product types that can be used to create an order: 


etc/sales.xml 


<?xml version="1.0"?> 
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi 
:noNamespaceSchemaLocation="urn:magento:module:Magento Sales:etc/ 
sales.xsd"> 

<order> 

<available product_type name="demo"/> 

</order> 

</config> 


6. Optionally, it is possible to specify a custom renderer to create the Invoice and 
Creditmemo PDF documents: 


etc/pdf.xml 


<?xml version="1.0"?> 


<config xmlns:xsi="http://www.w3.org/2001/ 
XMLSchema-instance" xsi:noNamespaceSchemaLocation= 
"urn:magento:module:Magento Sales:etc/pdf file.xsd"> 
<renderers> 
<page type="invoice"> 
<renderer product_type="demo">Magento\Sales\Model\ 
Order\Pdf\Items\Invoice\DefaultInvoice</renderer> 
</page> 
<page type="creditmemo"> 
<renderer product_type="demo">Magento\Sales\Model\ 
Order\Pdf\Items\Creditmemo\DefaultCreditmemo 
</renderer> 
</page> 
</renderers> 
</config> 
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7. As we added a data upgrade script, it is necessary to increment setup_version 
in the module configuration. In this case, the version has been updated from 0.8.3 
to 0.8.4. This is used in the upgrade script to execute only if the installed version is 
lower than the new version. 


etc/module.xml 


<?xml version="1.0"?> 
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xs 
i:noNamespaceSchemaLocation="urn:magento: framework :Module/etc/ 
module.xsd"> 
<module name="Genmato Sample" setup _version="0.8.4"> 
<sequence> 
<module name="Magento_Store"/> 
</sequence> 
</module> 
</config> 


8. After this, run the upgrade command to update the attributes specified in the 
upgrade command. The cache is flushed at the same time to read the updated 
configuration. 


The new defined product type is now available in the backend to create a new product. The 
attributes used are similar to a simple product, and you can add your own fields if necessary. 
The priceModel instance specified will calculate the product price on rendering on the 
frontend; in this case, the cost attribute is used and multiplied by 1.25. 


While creating the product, it is possible to set the Cost attribute in the Advanced Pricing tab. 
In this example, we used a product cost of €25.00: 





Advanced Pricing 


Cost 25.00 














Creating Magento 2 Extensions - Advanced 





When the product is saved and requested on the frontend, the price will be calculated based 
on the preceding values and result in a final price of €31.25: 





Demo Product 


Be the first to review this product 


€31 25 SKU#: Demo Product 
b 











In the configuration of the new product type (in product_types .xm1), it is also possible to 
specify the following items: 
>» indexerModel: This is to specify a custom indexer for your product type 


>  stockIndexerModel: This is to specify a custom indexer to manage the stock of 
your product type 





Working with service layers/contracts 


A service layer/contract is a fixed interface to get and store data without knowing the 
underlying layer. It is possible to swap the way the data is stored without changing the 
service layer. 


Aservice layer consists of three interface types: 
>» Data interface: A data interface is a read-only presentation of a record, and 
therefore, this type of interface only has getters to represent a data record. 


> Repository interface: A repository interface gives access to read and write (and 
delete) data. Every repository interface has the following methods: 


a  getList: This returns a list of records based on the (optionally) provided 
search parameters 


a get: This loads the data from the database and returns a data interface for 
the specified ID 


a save: This saves the record specified in the data interface 
a delete: This deletes the record specified in the data interface 
a deleteBylId: This deletes the record specified by the ID 


>» Management interface: In a management interface, it is possible to specify special 
management functions that are not related to the repository. 
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Using a service layer also makes it easy to extend your module to access the web API; you only 
need to add a declaration in the appropriate XML to configure the link from the API command 
to the right interface. 


How to do it... 


In this recipe, we will add the option to read, create, or delete a record through a service 
layer contract: 


1. Create a repository interface where the available commands are declared: 


Api/DemoRepositoryInterface.php 


<?php 
namespace Genmato\Sample\Api; 


interface DemoRepositoryInterface 

[** 

* Save demo list item. 

* 

* @api 

* @param \Genmato\Sample\Api\Data\DemoInterface $demo 

* @return \Magento\Customer\Api\Data\GroupInterface 

* @throws \Magento\Framework\Exception\InputException If 
there is a problem with the input 

* @throws \Magento\Framework\Exception\ 
NoSuchEntityException If a group ID is sent but the 
group does not exist 


* @throws \Magento\Framework\Exception\State\ 
InvalidTransitionException 





*If saving customer group with customer group code that 
is used by an existing customer group 





* @throws \Magento\Framework\Exception\LocalizedException 

*/ 

public function save ( 
\Genmato\Sample\Api\Data\DemoInterface $demo) ; 


[** 

* Get demo list item by ID. 

* 

* @api 

* @param int $id 

* @return \Genmato\Sample\Api\Data\DemoInterface 

* @throws \Magento\Framework\Exception\ 
NoSuchEntityException If $groupId is not found 
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* @throws \Magento\Framework\Exception\LocalizedException 
*/ 
public function getById ($id); 


[** 
* Retrieve demo list items. 


* 


* The list of demo items can be filtered 

* 

* @api 

* @param \Magento\Framework\Api\SearchCriteriaInterface 
SsearchCriteria 

* @return \Genmato\Sample\Api\Data\ 
DemoSearchResultsInterface 

* @throws \Magento\Framework\Exception\LocalizedException 

*/ 

public function getList (\Magento\Framework\Api\ 
SearchCriteriaInterface $searchCriteria) ; 


[** 

* Delete demo list item. 

* 

* @api 

* @param \Genmato\Sample\Api\Data\DemoInterface $demo 
* @return bool true on success 


* @throws \Magento\Framework\Exception\StateException If 
customer group cannot be deleted 


* @throws \Magento\Framework\Exception\LocalizedException 

*/ 

public function delete ( 
\Genmato\Sample\Api\Data\DemoInterface $demo) ; 


[** 

* Delete demolist by ID. 

* 

* @api 

* @param int $id 

* @return bool true on success 

* @throws \Magento\Framework\Exception\ 
NoSuchEntityException 

* @throws \Magento\Framework\Exception\StateException If 
customer group cannot be deleted 


* @throws \Magento\Framework\Exception\LocalizedException 
*/ 
public function deleteById($id) ; 
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Create the repository resource model. Here, the defined functions from the interface 
have the actual code: 


Model /ResourceModel /DemoRepository.php 


<?php 
namespace Genmato\Sample\Model\ResourceModel ; 


use Genmato\Sample\Model\DemoRegistry; 

use Genmato\Sample\Model\DemoFactory; 

use Genmato\Sample\Api\Data\DemoInterface; 

use Genmato\Sample\Api\Data\DemoInterfaceFactory; 

use Genmato\Sample\Api\Data\DemoExtensionInterface; 

use Genmato\Sample\Api\Data\ 
DemoSearchResultsInterfaceFactory; 

use Genmato\Sample\Model\Demo; 

use Genmato\Sample\Model\ResourceModel\Demo as 
DemoResource; 

use Genmato\Sample\Model\ResourceModel\Demo\Collection; 

use Genmato\Sample\Api\DemoRepositoryInterface; 








use Magento\Framework\Exception\CouldNotDeleteException; 

use Magento\Framework\Exception\CouldNotSaveException; 

use Magento\Framework\Exception\NoSuchEntityException; 

use Magento\Framework\Api\SearchCriteriaInterface; 

use Magento\Framework\Reflection\DataObjectProcessor; 

use Magento\Framework\Api\ExtensionAttribute\ 
JoinProcessorinterface; 








class DemoRepository implements DemoRepositoryInterface 


{ 


/** @var DemoRegistry */ 
private $demoRegistry; 


/** @var DemoFactory */ 
private $demoFactory; 





/** @var DemoInterfaceFactory */ 
private $demoDataFactory; 


/** @var Demo */ 
private $demoResourceModel ; 





[** 
* @var DataObjectProcessor 


y 





Creating Magento 2 Extensions - Advanced 





private $dataObjectProcessor; 


[** 
* @var DemoSearchResultsInterfaceFactory 
*/ 


protected $searchResultsFactory; 


[** 
* @var JoinProcessoriInterface 
*/ 


protected S$extensionAttributesJoinProcessor; 


k*k 


@param DemoRegistry $demoRegistry 

@param DemoFactory $demoFactory 

@param DemoInterfaceFactory $demoDataFactory 

@param DemoResource $demoResourceModel 

@param DataObjectProcessor $dataObject Processor 

@param DemoSearchResultsInterfaceFactory 

SsearchResultsFactory 

* @param JoinProcessoriInterface 
SextensionAttributesJoinProcessor 

*/ 

public function __ construct ( 

DemoRegistry $demoRegistry, 

DemoFactory $demoFactory, 

DemoInterfaceFactory $demoDataFactory, 

DemoResource S$demoResourceModel, 

DataObjectProcessor $dataObjectProcessor, 

DemoSearchResultsInterfaceFactory 
SsearchResultsFactory, 

JoinProcessoriInterface 
SextensionAttributesJoinProcessor 





+ O + +*+» *+N 











this->demoRegistry = $demoRegistry; 
this->demoFactory = $demoFactory; 
this->demoDataFactory = $demoDataFactory; 
this->demoResourceModel $demoResourceModel ; 
this->dataObjectProcessor = $dataObjectProcessor; 
this->searchResultsFactory = $searchResultsFactory; 














this->extensionAttributesJoinProcessor = 
SextensionAttributesJoinProcessor; 


Ur ir Ur Ur NUN UN-s 


} 

[** 

* {@inheritdoc} 
*/ 


public function save(DemoInterface $demo) 








/** @var Demo $demoModel */ 
SdemoModel = S$this->demoFactory->create(); 


if ($demo->getId()) { 
$demoModel->load ($demo->getId()); 

} 

$demoModel 

->setTitle ($demo->getTitle() ) 

->setIsVisible ($demo->getIsVisible() ) 

->setIsActive ($demo->getIsActive()) ; 





try { 
$demoModel->save() ; 


} catch (\Exception $exception) { 
throw new CouldNotSaveException( _(S$exception-> 
getMessage())); 
} 


return $demoModel->getData() ; 


[** 
* {@inheritdoc} 
aA 
public function getById ($id) 
{ 
$demoModel = S$this->demoRegistry->retrieve ($id); 
$demoDataObject = $this->demoDataFactory->create() 
->setId($demoModel->getId() ) 
->setTitle ($demoModel->getTitle() ) 
->setCreationTime ($demoModel ->getCreationTime () ) 
->setUpdateTime ($demoModel - >getUpdateTime () ) 
->setIsVisible ($demoModel->getIsVisible() ) 
->setIsActive ($demoModel->getIsActive()) ; 
return $demoDataObject; 


} 


[** 

* {@inheritdoc} 

*/ 

public function getList (SearchCriteriaInterface 
SsearchCriteria) 

SsearchResults = S$this->searchResultsFactory->create() ; 
SsearchResults->setSearchCriteria(SsearchCriteria) ; 





/** @var Collection $collection */ 
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Scollection = $this->demoFactory->create()-> 
getCollection() ; 
foreach ($searchCriteria->getFilterGroups() as 
$filterGroup) { 
foreach ($filterGroup->getFilters() as $filter) { 
Scondition = $filter->getConditionType() ?: 'eq'; 
Scollection->addFieldToFilter($filter->getField(), 
[S$condition => $filter->getValue()]); 


} 
} 


SsearchResults->setTotalCount ($collection->sgetSize()); 
SsortOrders = S$searchCriteria->getSortOrders() ; 
if ($sortOrders) { 
/** @var SortOrder $sortOrder */ 
foreach (SsortOrders as S$sortOrder) { 
$collection->addOrder ( 
SsortOrder->getField(), 
(SsortOrder->getDirection() == 
SortOrder::SORT ASC) ? 'ASC' : 'DESC'! 
M3 
} 
} 


Scollection->setCurPage (S$searchCriteria-> 
getCurrentPage()); 
Scollection->setPageSize($searchCriteria-> 
getPageSize()); 
/** @var DemoInterface[] S$demos */ 
Sdemos = []; 
/** @var Demo S$demo */ 
foreach (Scollection as $demo) { 
/** @var DemoInterface $demoDataObject */ 
SdemoDataObject = $this->demoDataFactory->create() 
->setId($demo->getId() ) 
->setTitle ($demo->getTitle() ) 
->setCreationTime ($demo->getCreationTime () ) 
->setUpdateTime ($demo->getUpdateTime () ) 
->setIsVisible ($demo->getIsVisible() ) 
->setIsActive ($demo->getIsActive()); 





Sdemos[] = $demoDataObject; 


} 


SsearchResults->setTotalCount ($collection-sgetSize()); 
return S$searchResults->setItems ($demos) ; 


} 
[** 


* Delete demo list item. 








+ FO 


*/ 


@param DemoInterface $demo 

@return bool true on success 

@throws \Magento\Framework\Exception\StateException If 
customer group cannot be deleted 

@throws \Magento\Framework\Exception\LocalizedException 


public function delete (DemoInterface $demo) 


{ 
} 
/* 


* 


+ + + + 


xf 





return $this->deleteById($demo->getId() ) ; 


* 


Delete demo list item by ID. 


@param int $id 

@return bool true on success 

@throws \Magento\Framework\Exception\ 
NoSuchEntityException 

@throws \Magento\Framework\Exception\StateException If 
customer group cannot be deleted 

@throws \Magento\Framework\Exception\LocalizedException 





public function deleteById ($id) 


{ 


SdemoModel = S$this->demoRegistry->retrieve ($id); 


if ($id <= 0) { 
throw new \Magento\Framework\Exception\ 
StateException( ('Cannot delete demo item.')); 


$demoModel->delete() ; 
Sthis->demoRegistry->remove ($id) ; 
return true; 


Create the registry class; this stores the loaded records: 
Model/DemoRegistry.php 
<?php 


[** 
* Sample 
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* @package Genmato_ Sample 

* @author Vladimir Kerkhoff <support@genmato.com> 

* @created 2015-12-23 

* @copyright Copyright (c) 2015 Genmato BV, 
https://genmato.com. 


$ 


namespace Genmato\Sample\Model; 


use Genmato\Sample\Api\Data\DemoInterface; 
use Magento\Framework\Exception\NoSuchEntityException; 


class DemoRegistry 


{ 


[** 

* @var array 

*/ 

protected S$registry = []; 
[** 

* @var DemoFactory 

*/ 

protected $demoFactory; 
[** 

* @param DemoFactory $demoFactory 
*/ 


public function __ construct (DemoFactory $demoFactory) 


{ 


Sthis->demoFactory = $demoFactory; 


[** 
* Get instance of the Demo Model identified by an id 
* 
* @param int $demoId 
* @return Demo 
* @throws NoSuchEntityException 
*/ 
public function retrieve ($demoId) 
{ 
if (isset ($this->registry[$demoId])) { 
return $this->registry [$demolId] ; 


} 


$demo = $this->demoFactory->create() ; 
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$demo->load($demolId) ; 
if ($demo->getId() === null || $demo->getId() != 
$demoId) 


throw NoSuchEntityException: :singleField ( 
DemoInterface::ID, $SdemoId) ; 


} 
Sthis->registry[$demoId] = $demo; 
return S$demo; 


[** 
* Remove an instance of the Demo Model from the registry 
* 


* @param int $demoId 

* @return void 

27 

public function remove ($demoId) 


{ 


unset ($this->registry [$demoId] ) ; 


} 
Create a data interface; here, the available attributes (getters and setters) are defined: 


Api/Data/DemoInterface.php 


<?php 
namespace Genmato\Sample\Api\Data; 


use Genmato\Sample\Api\Data\DemoExtensionInterface; 
use Magento\Framework\Api\ExtensibleDataInterface; 


interface DemoInterface extends ExtensibleDataInterface 


{ 


const ID = 'id'; 

const TITLE = 'title'; 

const CREATION TIME = 'creation_time'; 
const UPDATE TIME = 'update_time'; 
const IS ACTIVE = 'is_active'; 

const IS VISIBLE = 'is visible'; 

[** 

* Get id 
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* @api 

* @return int|null 

*/ 

public function getId(); 


[** 

* Set id 

* 

* @api 

* @param int $id 

* @return $this 

*/ 

public function setId($id) ; 


[** 

* Get Title 

* 

* @api 

* @return string 

*/ 

public function getTitle(); 


[** 

* Set Title 

* 

* @api 

* @param string $title 

* @return $this 

*/; 

public function setTitle ($title); 


[** 

* Get Is Active 
* 

* @api 

* @return bool 
*/ 


public function getIsActive(); 


[** 
* Set Is Active 
* 


* @api 
* @param bool SisActive 
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* @return $this 
*/ 


public function setIsActive ($isActive) ; 


[** 

* Get Is Visible 

* 

* @api 

* @return bool 

*/ 

public function getIsVisible() ; 


[** 

* Set Is Active 

* 

* @api 

* @param bool SisVisible 
* @return $this 

*/ 


public function setIsVisible(SisVisible) ; 


[** 

* Get creation time 
* 

* @api 

* @return string 

*/ 


public function getCreationTime() ; 


[** 

* Set creation time 

* 

* @api 

* @param string $creationTime 
* @return $this 

*7 


public function setCreationTime ($creationTime); 


/** 
* Get update time 


* @api 
* @return string 


*/ 
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public function getUpdateTime() ; 


[** 

* Set update time 

* 

* @api 

* @param string SupdateTime 

* @return $this 

*/ 

public function setUpdateTime (SupdateTime) ; 


[** 

* Retrieve existing extension attributes object or create 
a new one. 

* 

* @api 

* @return DemoExtensionInterface|null 

*/ 

public function getExtensionAttributes(); 


[** 

* Set an extension attributes object. 

* 

* @api 

* @param DemoExtensionInterface $extensionAttributes 

* @return $this 

z. 

public function setExtensionAttributes ( 
DemoExtensionInterface $extensionAttributes); 


} 


5. Create the data mapping class: 
Model /Data/Demo. php 


<?php 
namespace Genmato\Sample\Model\Data; 


use Magento\Framework\Api\AbstractExtensibleObject; 
use Genmato\Sample\Api\Data\DemoInterface; 
use Genmato\Sample\Api\Data\DemoExtensionInterface; 


class Demo extends AbstractExtensibleObject implements 
DemoInterface 


[** 








* Get id 
* 


* @return int|null 
*/ 
public function getId() 


{ 
} 


return Sthis-> get (self::ID); 


[** 

* Set id 

* 

* @param int $id 

* @return $this 

*/ 

public function setId($id) 


{ 


return S$this->setData(self::ID, $id); 


[** 
* Get code 
* 


* @return string 
*/ 
public function getTitle() 


{ 
} 


return $this-> get (self::TITLE) ; 


[** 

* Set code 

* 

* @param string $title 

* @return $this 

*/ 

public function setTitle ($title) 


{ 


return Sthis->setData(self::TITLE, 


[** 
* Get Is Active 
* 


title); 
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* @return bool 


a 


public function getIsActive() 


{ 


return S$this-> get(self::IS ACTIVE) ; 


[** 
* Set Is Ac 
* 


tive 


* @param bool SisActive 


* @return $ 
+7 
public func 


{ 


return $t 


[** 


this 


tion setIsActive (S$isActive) 





his->setData(self::IS ACTIVE, SisActive) ; 


* Get Is Visible 


* 


* @return bool 


*/ 


public function getIsVisible() 


{ 


return $this-> get(self::IS VISIBLE) ; 


[** 
* Set Is Ac 
* 


tive 


* @param bool SisVisible 


* @return $ 
iat 
public func 


{ 


return $t 


[** 


this 


tion setIsVisible(SisVisible) 





his->setData(self::IS VISIBLE, SisVisible) ; 


* Get creation time 


* 


* @return string 


*/ 








public function getCreationTime() 


{ 


return Sthis-> get (self::CREATION TIME) ; 


[** 
* Set creation time 
* 


* @param string $creationTime 

* @return $this 

*/ 

public function setCreationTime ($creationTime) 


return S$this->setData(self::CREATION TIME, 
ScreationTime) ; 


[** 
* Get update time 
* 


* @return string 
*/ 
public function getUpdateTime () 


{ 


return Sthis-> get (self::UPDATE TIME) ; 


[** 
* Set update time 
* 


* @param string SupdateTime 

* @return $this 

*/ 

public function setUpdateTime (SupdateTime) 


{ 


return Sthis->setData(self::UPDATE TIME, SupdateTime) ; 


[** 
* {@inheritdoc} 
* 


* @return DemoExtensionInterface|null 
*/ 
public function getExtensionAttributes () 
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{ 


return S$this-> getExtensionAttributes () ; 


[** 
* {@inheritdoc} 
* 


* @param DemoExtensionInterface $extensionAttributes 

* @return $this 

*/ 

public function setExtensionAttributes ( 
DemoExtensionInterface SextensionAttributes) 


return Sthis-> setExtensionAttributes ( 
SextensionAttributes) ; 


} 


6. Create the search results interface; this is used in the getList command: 


Api/Data/DemoSearchResultsInterface.php 


<?php 
namespace Genmato\Sample\Api\Data; 


use Genmato\Sample\Api\Data\DemoInterface; 
use Magento\Framework\Api\SearchResultsInterface; 


interface DemoSearchResultsInterface extends 
SearchResultsInterface 


[** 

* Get demo item list. 

* 

* @api 

* @return DemoInterface [] 
ia? 


public function getItems(); 


[** 

* Set demo item list. 

* 

* @api 

* @param DemoInterface[] Sitems 
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* @return $this 
*/ 


public function setItems(array S$items) ; 


} 


7. Bind the interfaces through di .xm1 by adding the following lines: 
etc/di.xml 


<preference for="Genmato\Sample\Api\ 
DemoRepositoryInterface" 


type="Genmato\Sample\Model\ResourceModel\ 
DemoRepository" /> 


<preference for="Genmato\Sample\Api\Data\DemoInterface" 
type="Genmato\Sample\Model\Data\Demo" /> 


<preference for="Genmato\Sample\Api\Data\ 
DemoSearchResultsInterface" 


type="Magento\Framework\Api\SearchResults" /> 


8. Add the Test controller; here, we test the working of the service layer: (This is 
optional.) 


Controller/Index/Test .php 


<?php 
namespace Genmato\Sample\Controller\Index; 


use Magento\Framework\App\Action\Action; 

use Magento\Framework\App\Action\Context ; 

use Magento\Framework\View\Result\PageFactory; 
use Magento\Framework\Api\SearchCriteriaBuilder; 
use Genmato\Sample\Api\DemoRepositoryInterface; 
use Genmato\Sample\Model\Data\DemoFactory; 

use Genmato\Sample\Api\Data\DemoInterface; 





class Test extends Action 


[** 
* @var PageFactory 
iy 


private SresultPageFactory; 


/** @var DemoRepositoryInterface */ 
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private $demoRepository; 


/** @var DemoFactory */ 
private $demo; 


[** 

* @var SearchCriteriaBuilder 

*/ 

private S$searchCriteriaBuilder; 
[** 


* @param Context $context 

* @param PageFactory $resultPageFactory 

* @param DemoRepositoryInterface $demoRepository 

* @param SearchCriteriaBuilder $searchCriteriaBuilder 

* @param DemoFactory $demoFactory 

*/ 

public function __ construct ( 
Context S$context, 
PageFactory SresultPageFactory, 
DemoRepositoryInterface $demoRepository, 
SearchCriteriaBuilder S$searchCriteriaBuilder, 
DemoFactory $demoFactory 


Sthis->demoRepository = $demoRepository; 
Sthis->searchCriteriaBuilder = SsearchCriteriaBuilder; 
Sthis->demo = $demoFactory; 

parent:: construct ($context) ; 


[** 

* Renders Sample 

*/ 

public function execute () 


{ 


echo '<pre>'; 
// Create new record through service layer/contract 


/** @var DemoInterface S$demoRecord */ 

SdemoRecord = Sthis->demo->create() ; 

S$demoRecord->setIsActive (1) 
->setIsVisible(1) 
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->setTitle('Test through Service Layer'); 


Sdemo = $this->demoRepository->save ($demoRecord) ; 
print_r ($demo); 


// Get list of available records 


SsearchCriteria = $this->searchCriteriaBuilder-> 
create ()j; 


SsearchResult = $this->demoRepository-> 
getList ($searchCriteria) ; 


foreach ($searchResult->getItems() as $item) { 
echo S$item->getId().' => '.S$Sitem->sgetTitle().'<br>'; 
} 
} 


} 


9. Refresh the cache and generated data: 


bin/magento setup:upgrade 


10. Access the result of the test URL: 
http: //example.com/sample/index/test/ 


The service layer/contract defines the methods and data format through these interfaces. 


DemoRepositoryInterface 


This interface describes the available methods, input, and output that is expected. The actual 
logic for the methods is done by the Model\ResourceModel\ DemoRepository class. 

In di .xm1, there is a preference created that will use DemoRepository instead of the 
Interface Class: 


<preference for="Genmato\Sample\Api\DemoRepositoryInterface" 
type="Genmato\Sample\Model\ResourceModel\DemoRepository" /> 


Demolnterface 


In this interface, the available getters and setters for the object are described. Just like 
RepositorylInterface, the actual processing of the data is mapped through di .xm1 to 
the Data\Demo class: 


<preference for="Genmato\Sample\Api\Data\DemoInterface" 
type="Genmato\Sample\Model\Data\Demo" /> 
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In the next recipe, we will see how the getById, deleteById, list, and save methods can 
be used in your own code. 





Creating a Magento CLI command option 





With Magento 2, there is a command-line interface (CLI) available to run several tasks. The 
bin/magento command replaces the separate shell scripts that were used in Magento 

1. This command is based on the Symfony Console component and looks just like n98- 
magerun that is available for Magento 1. Just like the rest of Magento 2, it's possible to 
extend the CLI tool with your own commands. 


Getting ready 


Adding commands to the CLI script requires some knowledge of the Symfony Console 
component. This recipe also uses the service layer created in the previous recipe. 


How to do it... 


In this recipe, we will add four options to the bin/magento CLI command with the 
following steps: 


1. Create the AddCommand class; this is used to create a new record through the CLI: 


Console/Command/AddCommand. php 


<?php 
namespace Genmato\Sample\Console\Command; 


use Genmato\Sample\Api\DemoRepositoryInterface; 
use Genmato\Sample\Model\Data\DemoFactory; 
use Genmato\Sample\Api\Data\DemoInterface; 


use Symfony\Component\Console\Input\InputOption; 

use Symfony\Component\Console\Input\InputArgument ; 

use Symfony\Component \Console\Command\Command; 

use Symfony\Component\Console\Input\InputInterface; 

use Symfony\Component\Console\Output\OutputInterface; 

use Symfony\Component\Console\Question\ConfirmationQuestion; 





class AddCommand extends Command 








/** @var DemoRepositoryInterface */ 
private $demoRepository; 


/** @var DemoFactory */ 
private $demoFactory; 


[** 

* AddCommand constructor. 

* @param DemoRepositoryInterface $demoRepository 

* @param DemoFactory $demoFactory 

* @param null $name 

a] 

public function __ construct ( 
DemoRepositoryInterface $demoRepository, 
DemoFactory $demoFactory, 

Sname = null) 


{ 


parent:: construct ($name) ; 


Sthis->demoRepository = $demoRepository; 
Sthis->demoFactory = $demoFactory; 


[** 

* {@inheritdoc} 

*/, 

protected function configure () 

Sthis->setName ('demo:add') 
->setDescription('Add demo record') 
->addArgument ('title!',InputArgument : :OPTIONAL, 


'Title') 
->addOption('active', null, InputOption::VALUE NONE, 
'Active') 
->addOption('visible', null, InputOption: : VALUE NONE, 
'Visible') 
[** 
* {@inheritdoc} 
z7 
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protected function execute (InputInterface $input, 
OutputInterface $output) 
{ 
$title = Sinput->getArgument ('title'); 
$active = Sinput->getOption('active')? 1:0; 
Svisible = Sinput->getOption('visible')? 1:0; 
if (!$title) { 

S$dialog = $this->getHelper('dialog'); 





$title = S$dialog->ask(Soutput, '<question>Enter the 
Title:</question> ',false); 

$active = $dialog-ə>ask ($output, '<question>Should 
record be active: [Y/n]</question> ','y'); 

$active = (strtolower ($active) == 'y') ? 1:0; 

Svisible = $dialog->ask(Soutput, '<question>Should 
record be visible: [Y/n]</question> ','y'); 

Svisible = (strtolower($visible) == 'y') ? 1:0; 


/** @var DemoInterface $demoRecord */ 
SdemoRecord = $this->demoFactory->create() ; 
S$demoRecord->setIsActive ($active) 
->setIsVisible (S$visible) 
->setTitle ($title); 


try { 
$demo = $this->demoRepository->save ($demoRecord) ; 


Soutput->writeln('New record created (id='.$demo-> 
getId().')'); 
}catch (\Exception $ex) { 
Soutput->writeln('<error>'.$ex-> 
getMessage().'</error>'); 


} 
Create the delete option class; this is used to delete a record through the CLI: 


Console/Command/DeleteCommand.php 


<?php 
namespace Genmato\Sample\Console\Command; 


use Genmato\Sample\Api\DemoRepositoryInterface; 


use Symfony\Component\Console\Input\InputOption; 
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use Symfony\Component \Console\Command\Command; 

use Symfony\Component\Console\Input\InputInterface; 

use Symfony\Component \Console\Output\OutputInterface; 

use Symfony\Component\Console\Question\ConfirmationQuestion; 


class DeleteCommand extends Command 


{ 


/** @var DemoRepositoryInterface */ 
private $demoRepository; 


public function _ construct ( 
DemoRepositoryInterface $demoRepository, 
$name = null) 


{ 


parent:: construct ($name) ; 


Sthis->demoRepository = $demoRepository; 


[** 

* {@inheritdoc} 

*/ 

protected function configure () 
{ 

Sthis->setName ('demo:delete') 
->setDescription('Delete demo record') 
->addOption ( 

‘id', 
null, 
InputOption: : VALUE REQUIRED, 
'Demo record ID to delete' 
) 
->addOption ( 
'force', 
null, 
InputOption: : VALUE NONE, 
"Force delete without confirmation' 


i 


[** 
* {@inheritdoc} 
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*/ 
protected function execute (InputInterface $input, 
OutputInterface $output) 


{ 


Shelper = $this->getHelper('question!') ; 
Sid = Sinput->getOption('id'); 


try { 
if (!$input->getOption('force')) { 

$data = $this->demoRepository->getById ($id) ; 

Soutput->writeln('Id :' . Sdata->getId()); 

Soutput->writeln('Title :' . Sdata-> 
getTitle()); 

Squestion = new ConfirmationQuestion('Are you sure 
you want to delete this record? ', false); 


if (!Shelper->ask(Sinput, $output, $question) ) { 
return; 


$data = $this->demoRepository->deleteById ($id); 
if ($data) { 
Soutput-swriteln('<info>Record deleted!</info>'); 


} else { 
Soutput->writeln('<error>Unable to delete 
record!</error>') ; 


} 
} catch (\Exception $ex) { 
Soutput->writeln('<error>'.$ex-> 
getMessage().'</error>'); 


} 
3. Create the get option class; this is used to list a single record through the CLI: 


Console/Command/Get Command. php 

<?php 

namespace Genmato\Sample\Console\Command; 

use Genmato\Sample\Api\DemoRepositoryInterface; 


use Symfony\Component \Console\Command\Command; 








use 
use 
use 


use 


Symfony\Component \Console\Input\InputArgument ; 
Symfony\Component \Console\Input\InputOption; 
Symfony\Component \Console\Input\InputInterface; 
Symfony\Component \Console\Output\OutputInterface; 


class GetCommand extends Command 


{ 


/** @var DemoRepositoryInterface */ 


private $demoRepository; 


public function _ construct ( 


DemoRepositoryInterface $demoRepository, 


Sname = null) 


{ 


parent:: construct ($name) ; 


Sthis->demoRepository = $demoRepository; 


[** 


* 


*/ 


{@inheritdoc} 


protected function configure () 


{ 


Sthis->setName ('demo:get') 
->setDescription('Get demo records') 
->addOption ( 

‘id', 

null, 

InputOption: : VALUE REQUIRED, 

'Demo record ID to display' 
di 


[** 


* 


*/ 


{@inheritdoc} 


protected function execute (InputInterface $input, 


OutputInterface $output) 
Sid = Sinput->getOption('id'); 


try { 
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$data = $this->demoRepository->getById ($id) ; 


Stable = S$this->getHelper('table'); 


Stable 
->setHeaders(array(__('ID'), __('Title'), 
__('Created'), __('Updated'), _ ('Visible'), 
_ (‘Active'))) 
->setRows ([[ 


Sdata->getId(), 

Sdata->getTitle(), 

Sdata->getCreationTime(), 

Sdata->getUpdateTime(), 

Sdata->getIsVisible() ? _('Yes') : __('No'), 
Sdata->getIsActive() ? _('Yes') : __('No') 
1); 

Stable->render ($output); 








} catch (\Exception $ex) { 
Soutput->writeln('<error>'.$ex-> 
getMessage().'</error>'); 


} 


4. Create the list option class; this is used to list the available records through the CLI: 
Console/Command/ListCommand.php 


<?php 
namespace Genmato\Sample\Console\Command; 


use Magento\Framework\Api\SearchCriteriaBuilder; 
use Genmato\Sample\Api\DemoRepositoryInterface; 


use Symfony\Component \Console\Command\Command; 
use Symfony\Component\Console\Input\InputInterface; 
use Symfony\Component\Console\Output\OutputInterface; 


class ListCommand extends Command 


{ 


/** @var DemoRepositoryInterface */ 
private $demoRepository; 


[** 
* @var SearchCriteriaBuilder 


*/ 
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private $searchCriteriaBuilder; 


public function __ construct ( 
DemoRepositoryInterface $demoRepository, 
SearchCriteriaBuilder S$searchCriteriaBuilder, 
Sname = null) 


parent:: construct ($name) ; 


S$this->demoRepository = $demoRepository; 
Sthis->searchCriteriaBuilder = SsearchCriteriaBuilder; 


[** 

* {@inheritdoc} 

*/ 

protected function configure () 

i $this->setName ('demo:list')->setDescription('List demo 
records'); 


[** 
* {@inheritdoc} 
*/ 
protected function execute (InputInterface $input, 
OutputInterface $output) 
// Get list of available records 
SsearchCriteria = $this->searchCriteriaBuilder-> 
create(); 
SsearchResult = $this->demoRepository-> 
getList ($searchCriteria) ; 


$rows = []; 
foreach ($searchResult->getItems() as $item) { 
Srows[] = [Sitem->getId(), $item->getTitle()]; 


Stable = S$this->getHelper('table'); 

Stable 
->setHeaders(array(__('ID'), __('Title'))) 
->setRows (Srows) 


Stable->render ($output); 
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5. 





Register the commands so that they are available for the CLI by adding the following 
lines to the di .xm1 configuration file: 


etc/di.xml 


<type name="Magento\Framework\Console\CommandList"> 
<arguments> 
<argument name="commands" xsi:type="array"> 
<item name="demoadd" xsi:type="object"> 
Genmato\Sample\Console\Command\AddCommand</item> 
<item name="demolist" xsi:type="object"> 
Genmato\Sample\Console\Command\ListCommand</item> 
<item name="demoget" xsi:type="object"> 
Genmato\Sample\Console\Command\Get Command</item> 
<item name="demodelete" xsi:type="object"> 
Genmato\Sample\Console\Command\DeleteCommand</item> 
</argument> 
</arguments> 
</type> 

















Refresh the cache and generated data: 

bin/magento setup:upgrade 

Check whether the added commands are available by running the following 
command: 


bin/magento 


Registering new commands works by registering new items through di .xm1 with the 
Magento\Framework\Console\CommandList class. In the XML file, every item that we 
want to add is listed with a unique name and the class that is used for this command. 


In the class listed, there are two methods that are used: 


> 


> 


configure: In the configure method, the command is added with the following 
parameters: 


aū setName: This is the option used for the command 


Q setDesciption: This is a short description of the command, which is 
shown in the command listing 


Qa setArgument (optional): This sets arguments necessary for the command 
Q setOption (optional): This sets options necessary for the command 


execute: This is the actual method that is executed; here, the logic that you want to 
perform is located 
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